9672 が 77726 奴 の 77r の /Z22007 が 27 27  Ze7 27 の 20% 


J2aV コ 
SCFIDt 


デン ニー ウル ク フッ ク 了 Ms 





ws 


ご 」 


Ajax の 吾 頭 に よっ て 位 然 注目 を 浴び て いる JavaScript。 
ライ ブラ リ を 合っ た 見 せ 場 た っ ぷり の スゴ 抽 を 実践 的 な 
例題 で わか りや すく 解読 。 





(@SK 作 充 有 | 


好評 発売 中 ! 
) Ajax テク ニッ ク ブ ッ ク 


Ajax 用 の ライ ブラ リ の 利用 方 法 や 
PHP を 使っ た サー バー サイ ド の 処 
理 、 デ ー タ ベー ス と の 連携 な ど 実 貴 
テク ニッ ク を 徹底 的 に 解説 。 中 級 一 
上 級 者 に お 勧め の 1 冊 ! 


ISBN4-9031 1 1 -29-6 
B5 変 ・344 頁 
定価 8.500 円 + 税 


I Perl テ クニ ッ ク ブ ッ ク 


pemm な Per oe ん ーーー 


Perl を 使う 上 で 知っ て お きた い 基 本 
的 な 構文 か ら 実践 で 役立つ ブロ グラ | 
ムコ ー ド を 解説 し て お り 、 実 際 の 現場 | テッ ニッ ク ブッ ク で = 
で 使え る テク ニッ ク が 満載 。 Perl 初 4 
心 者 中級 者 に お 勧め の 1 肛 。 


ISBN4-9031 1 1-41-5 
B5 変 ・320 頁 
定価 5.600 円 + 税 
デー タ を [見 える 化 」 す る 
Excel ビ ピボット テー ブル 大 事典 
ピボット テー ブル は 、 元 と な る デー タ 
か ら 了 瞬時 に 目的 の 集計 表 を 作成 する 
こと が で き 、 集 計 方 法 の 変更 も 自在 な 目 ゴ el| 
便利 ツー ル 。 簡 単 操作 で プロ 級 の デー 記 35 必 2>2 ン /) ア 日 
分析 が で きる 。 蓄 積 され た デー タ の . 関 還 還 時 
集計 ・ 管 理 に 威力 を 発揮 する 1 冊 。 


ISBN978-4-9031 1 1-51-3 | } 
B5 変 ・540 頁 | 膝 ま ツー ル を 使 ぇ g 
定価 2.500 円 + 税 | SW 


CSR 研 究 所 に つい て 


CSR 研 究 所 は 新潟 市 に ある 出版 社 で す 。 ユ 
ニー ク な 社風 や 教育 方 針 は 新聞 や テレ ビ な ど で 
紹介 され た り し ます 。 詳細 に つい て は 、 次 の 
Web サ イト で ご 覧 いた だ く こ と が で きま す 。 


WWW. 選 -「.COIm 


会 社 に は 広報 と セラ ビー を 担当 する 正社員 の 
犬 「 ロ ー ラ 」 が いま す 。 な ん と 「 広 報 部 長 ] の 正 
式 な 肩書 き を 持ち 、 弊 社 の WeD サ イト で も 本 人 








専用 の ホー ムペ ー ジ を 持っ て いま す 。 


「MIー ロ 」 沖 話 聞 ⑲⑱ 





Py2e72 が 7 7 の 27r の /Z220777 が 27 27 67 27 0% 


J2aV コ 
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ナン に リク ブッ ク 
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の < ル eC Oc 66 シン vqr prows 
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docu 娘 en を .efE/ge ヵ て 297g('c ん 
ec ん /2u を を oz ).oxc/fc た 三 
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docuen を . る SetE/een297( 7e 
sg").puer 朋 7 し ニテ 
prowser. を の pe() 十 " く 6/> 


gcuen を .getE/eent/2g7g( テ e 
su/t )./xner ガ 7 也 し 十 ニ 


prowse/.05() 






















62C ヶ te で Ooo 存 


/ げ (wixgow.opera) /eturn "Opero': 
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CgR 研 究 所 


画 権 利 に つい て 
本 書 に 記述 され て いる 社名 ・ サ ービス 名 ・ 製 品名 は 、 一 般 に 各社 の 商標 また は 登録 商標 で す 。 
な お 、 本 書 で は W、O、@ は 割愛 し て いま す 。 


田 本 書 の 内 容 に つい て 

e 本 書 は 著者 ・ 編 集 者 が 実際 に 操作 し た 結果 を 慎重 に 検討 し 、 著 述 ・ 編 集 し て いま す 。 た だ し 、 本 書 の 記述 
内 容 に 関わ る 運用 結果 に まつ わる あら ゆる 損害 障害 に つき まし て は 、 責 任 を 負い ませ ん の で あら か じ 
め ご 了承 くだ さい 。 

e 本 書 で 紹介 し て いる 各 操 作 の 画面 は 、Windows Vista( 日 本 語 版 ) と Internet Explorer7 を 基本 に し 
て いま す 。 他 の 05 や ブラ ウザ を お 使い の 環境 で は 、 画 面 の デザ イン や 操作 が 異な る 場合 が び ござ いま す 
の で 、 あ ら か じ め ご 了承 くだ さい 。 

e 本 書 に 掲載 し て いる サン プル は 、Internet Explorer5.5 以 降 、Firefox 1.5 以 降 、Safari ら 以降 、 
Operag 以 降 で 動作 し ます 。 旧 バ ー ジ ョ ン の ブラ ウザ で は 動作 対象 外 と な り ま す の で 、 ご 了承 くだ さい 。 
elInternet Explorer7 の 場合 、 ロ ー カ ル 環 境 上 で の 動作 と サー バー 上 に アッ プロ ー ド し た と き の 動 作 が 
異な っ て いま す 。 ロー カル 環境 上 で は 期待 通り に 動作 し な いた め 、 サ ー バ ー 上 に アッ プロ ー ド し て 動作 を 

確認 し て くだ さい 。 





田 サ ンプ ル デ ー タ に つい て 

本書 の サン プル デー タ は 、CSR 研 究 所 の ホー ムペ ー ジ か ら ダ ウン ロー ド す る こと が で きま す 。 ダウ ン ロ ー 
ド 方 法 に つい て は 、]1 7 ペー ジ を 参照 し こく だ さい 。 

* サン ブル デー タ の 動作 な ど に つい て は 、 著 者 ・ 編 集 者 が 慎重 に 確認 し て お り ま す 。 た だ し 、 サ ンプ ル デ ー 
タ の 運用 結果 に まつ わる あら ゆる 損害 障害 に つき まし て は 、 責 任 を 負い ませ ん の で あら か じ め ご 了承 く 
だ さい 。 

* サン プル デー タ の 著作 権 は 、 著 者 及び CSH 研 究 所 が 所 有 し ます 。 許可 な く 配布 ・ 販 売 す る こと は 堅く 禁 
止 し ます 。 





久本 書 の 内 容 に つい て の お 問い 合わ せ に つい て 
この 度 は C&R 研 究 所 の 書籍 を お 買い あげ いた だ きま し て あり が と う ご ざ いま す 。 本 書 の 内 容 に 関す る お 問い 合わ せ は 、 
FAX また は 郵送 で 「 書 名 」「 該 当 す る ペー ジ 番 号 」「 返 信 先 ]」 を 必ず 明記 の 上 、 次 の 宛先 まで お 送り くだ さい 。 お 電話 や 電 


子 メ ー ル 、 ま た は 本 書 の 内 容 と は 直接 的 に 関係 の な い 事 柄 に 関す る ご 質問 に は お 答え で きま せん の で 、 あ ら か じ め ご 了承 
くだ さい 。 


〒950-3122 新潟 県 新潟 市 北 区 西 名 目 所 4083-6 株 式 会 社 C&R 研 究 所 編集 部 
FAX 025-258-2801 
「JavaScript テ クニ ッ ク ブ ッ ク 」 サ ポー ト 係 


とら に | 


JavaScript が 登場 し て 10 年 以上 が 経過 し まし た が 、 そ の 間 に JavaScript も 少し ずつ 
進化 を 遂げ て きま し た 。 近年 、JavaScript が 再度 注目 され る よう に な っ た の は 、 非 同期 通 
信 を 利用 し て 各種 処理 を 行う Ajax(Asynchronous JavaScript + XML) の 普及 に よる 
も の で す 。 


Ajax の 普及 に よっ て JavaScript が 注目 され る よう に な っ た の は 好ま し いこ と で す が 、 他 
言語 を 利用 し て いる プロ グラ マ か ら 見 た JavaScript と Web ペ ー ジ / サ イト 制作 を 行っ て き 
た Web プ ログ ラマ か ら 見 た JavaSoript で は 見 方 が 異な り 、 扱 いも 異な っ て いま す 。 最近 、 
JavaScript を 始め た プロ グラ マ は ロジ ッ ク ( ア ル ゴ リ ズム ) は 正しい の に 動作 し な い 、 ま た 
は 特定 の ブラ ウザ で し か 動作 し な い 、 と いう 問題 に 悩ま され る で し ょ う 。 ロジ ッ ク と し て は き 
れい な プロ グラ ム で あっ て も 現実 的 に 動か な けれ ば 、 ど うし よう も あり ませ ん 。 現実 的 に ロ 
ジッ ク と し て は 美しく な く て も 、 多 く の ブ ラウ ザ で 確実 に 動作 する プロ グラ ム の 方 が よい の 
KG 


し か し 、 い つま で も 旧来 の 手法 の まま で は 時 代 に 合わ な く な り 、 行 き 詰 まっ て し まう こと 
が あり ます 。 た と えば 、HTML 文 書 と スタ イル シー ト 、JavaScript コ ー ド は 分 離さ れ て いる 
べき だ と いわ れ ま す が 、 書 籍 で は これ ら を 分 離し て 解説 し た も の は あま り 見 当たり ませ ん 。 
また 、 切 に コー ド を 分 離せ よ と 求め られ て も 、 ど の よう に 分 離し コー ド を 書け ば よい の か が 困 
惑 し て し まい ます 。 


そこ で 、 本 書 で は 多く 見 か ける 処理 に 対し て HTML、 ス タイ ル シ ー ト 、JavaScript コ ー ド 
を 分 離し て 掲載 し こい ます 。 これ まで の JavaScript の 解説 書 (Web サ イト な ど ) で 書か れ 
て いる コー ド と 本 書 に 書か れ て いる コー ド を 比較 し て 見 る と よい で し ょ う 。 新しい 書き 方 に 
移行 する 際 に 役立つ は ず で す 。 


ら 007 年 4 月 


本 書 の 読み 方 


本 書 の 各 ペ ー ジ の レイ アウ ト は 、 次 の よう に な っ て いま す 。 









* 見 出し 
この 項目 の 内 容 を 一 言 
で 表し て いま す 。 


* サン プル デー タ の 所 在 
ダウ ン ロ ー ド し た サン プル デー タ の フォ ル ダ 


階層 を 表し て いま す 。 ダウ ン ロ ー ド 方 法 は 
17 ペ ー ジ を 参照 し て くだ さい 。 











画 昌 (し Geresosr[_ jezz| 


5 ペー ジ が 読み 込ま れ た ら 指 定 し た 
生生 2/ SN ー ル ド に フォ ー カ ス を 移す 


し て いま す 。 











さこ カ 
















ここ で は 、 ベ ペー ジ の 読み 込み 時 に 、 指 定 し た テキ スト フィ ー ル ド に フォ ー カ ス を 移す 方 法 に つい て 解説 し ます 。 







* ファ イル 名 
サン プル の ファ イル 名 を 
表し て いま す 。 
ベ ペー ジ が 表示 され る と 、 指 
定 し た テキ スト フィ ー ル ド 
に フォ ー カ ス が 移動 する 


* 章 タイ トル 
この 章 の タイ トル を 表し 
て いま す 。 





テー ふい | 削 E0-331dYHO 





ESUWReBKSei 委 目 邊 用 馬 枯 indexhtm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL 4.01 Transitiona1 / /EN"> 
<htm1> 
<head> 

<meta htEp-equi マ ="ConEen-type" Conten キ =" 上 ex 上 上 /htm1: 

charse キ =u 上 モ E-8"> 

で ヒュ 上 1e>JaVaSc エ ip Samp1e</ モ ュ 1e> 

<1ink re1="stylesheet" type="tex/css" href="main.oSS" 

media="a11"> 

で <SCript 上 ype=" ヒ ex / JaVaSC エ ip ヒ E" と で ="matn . 8"></5C エ ュ 













</head> 

<body> 
の e <h1>TD と バス ワー ド を 入力 し て ログ イン し て くだ さい 。 </h1> 
サン プル の ソー スコ ー ド <Eorm acion=" ./check .Cg1" method="get" name 放 mainForm"> 
を 掲載 し て いま す 。 TD:<input type="Eext" name="userTD" 1d="u 内 エエ D"><b ェ > 一 本 


PW:<1nput type="Eex モ " name="userPW" 1qd ニ = 誠 YserPW"><b エ > 
<1nput type="button" 1d="1oginButton " り 導 7a1ue=" ロ グイ ン "> 


</ Eorm> 
</body> 
・ ソ ー ス コー ド の 解説 
ソー スコ ー ド の 重要 な 可 - フ ォ ー カ ス し た い エ レ メ ン ト に ID 名 を 指定 する 


箇所 を 解説 し て いま す 。 
番号 は ソー スコ ー ド 内 の 
番号 に 対応 し て いま す 。 












* 折り 返し 記号 
サン プル の ソー スコ ー ド が 改行 され て いな いこ と を 表し て いま す 。 


最新 情報 に つい て 


本 書 の 記述 内 容 に お いて 、 内 容 の 間違い ・ 誤 植 ・ 最 新 情報 の 発生 な ど が あっ た 場合 は 、「CSH 研 究 所 の ホー ムペ ー ジ ] 


に て 、 そ の 情報 を いち 早く お 知ら せ し ま す 。 
http://www.c-r.Com (CSR 研 究 所 の ホー ムペ ー ジ ) 


EESIWRgejg 当 上 用 本 VER 本 本 mainjs 


window.on1oad = Function() 
document .getE1ementByTd ("userTD" ) . Eocus ( ) : 一 軸 
} 


台 「focus()」 を 使っ て 指定 し た エレ メン ト に フォ ー カ ス を 移す 


【@ 損 計 計 映 上 フォ ー カ ス す る に は [focus()」 を 使う 
ペー ジ 上 の 特定 の エレ メン ト に フォ ー カ ス を 移す に は 、「focus()」 を 使い ます 。 ペー ジ が 読み 込ま れ た 

ら 特 定 の テキ スト フィ ー ル ド に フォ ー カ ス す る に は 、「window.onload」 イ ベン ト が 発生 し た 際 に フォ ー カ ス 
処理 を 行う よう に し ます 。 サン ブル で は ID 名 が userlD の テキ スト フィ ー ル ド に フォ ー カ ス す る よう に し て い 
ます 。 







tjil 唱 フォ ー カ ス を 外す 


フォ ー ム の テキ スト フィ ー ル ド に フォ ー カ ス さ れ た 状態 か ら フ ォ ー カ ス を 外す に は 、「blur()」 を 使い ます 。 
サン ブル の 場合 は 、 次 の よう に 「focus()」 の 代わ り に 「blur()」 を 指定 し ます 。 


document .qetEl1ementByTd ("userTD" ) .b1ur ( ) : 





【@ 思 i 唱 テキ スト フィ ー ル ド の 内 容 を 選択 する 


ペー ジ が 読み 込ま れ た ら テ キス ト フ ィ ー ル ド の 内 容 を 選択 する に は 、「focus()」 と 「select()」 を 組み 合 
わせ ます 。 次 の よう に 最初 に フォ ー カ ス し 、 そ の 後に 選択 する よう に し ます 。 


window.on1oad = Function() ( 
document .getElementByTd ( "userTD" ) . Eocus ( ) : 
document . getE]ementByTd ("userTD" ) . se1ect ( ) : 
} 


ペー ジ が 表示 され る と 、 指 
定 し た テキ スト フィ ー ル ド 
の 内 容 が 選択 され る 











ビー 眼 と 0 -H ヨ ldVH 


ゃ インデックス 

どの 草 か わか りや すい 
よう に 見 開き の ペー ジ 
の 両側 に イン デック ス を 
配置 し て いま す 。 色 が 付 
いて いる と ころ が 該当 
の 草 で 、 上 か ら 順 に 1 一 
12 章 を 示し て いま す 。 


* OnePoint 
操作 例 の テク ニッ ク の ポ 
イン ト や 仕組 み を 解説 し 
ます 。 





es Column 
発展 的 な 情報 を 解説 し 


ます 。 
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条件 分 岐 に つい て ーーー ドド ドド ドド に に に に に に に に に に に に に に に に に し し 33 
繰り 返し 処理 に つい て 上 … つつ lhー ニ ーー ツー ドド ドド ドド ドド に に に に に に に に に に トト トッ に し に に し にし に し に し に 36 
「009 | 関数 の 定義 上 tt1| 信 ビ ヨー ヨー ぬ ーー ドド ドド ドド に に に に に に に に スト に トト に に に し し し に し に し し し し し 3 フ 7 
オブ ジェ クト / メ ソ ッ ド / プ ロ パ ティ に つい て バト トー トド ドド ドド < トト トト トッ トト し し いで しゃ で て て て 38 
生れ G088 な ER な SRISGSGGG GE 40 
DOM に つ LU て で 阜 ドド に eeeeeeeereeeeeeeeeeeeteessseseettstsccess 43 
プロ グラ ム を 作成 する 場合 の 注意 点 ・‥… バ バド ババ バ トバ パト トー ui ドド ドゥ レー ドー 45 
JavaScript ラ イブ ラリ に っ し て ーー ドド ドド に に に に に に に に に 46 

過多 ほぼ 門 見 つ 革 居る coD2esioodezeseeekteeee Weee esseis 4 フ 


CHAPTER - 02 基本 テク ニッ ク 


JavaScript を HTML 文 書 内 に 記述 する 上 ドド バトー ヨ ー ヨ ー ヨ ー ル ツラ ユー ドド ドド ドド ドー 50 
則 JavaScripot の コー ド は ぐ く script> タ グ で 囲ま れ た 範囲 に 記述 する 


JavaScript を HTML タ グ 内 に 記述 する 上 ーー トー ツル ツ ー ド ドド ドド ーー に に ーー 1 
叶 タグ 内 に 記述 する 場合 は イベ ント ハン ドラ を 使う 


別 フ ァイル の JavaScript フ ァイル を 読み 込む ・ ド トーー ル ツ lーー ド ドド ドド に ーー ロ ら 
則 読み 込む JavaScript フ ァイル は 「src」 属 性 で URL を 指定 する 
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ダイ ナミ ッ ク に 別 フ ァイル の JavaScript フ ァイル を 読み 込む ・…… ド ーー ドー 53 
W <Script> タ グ を 生成 し て ペー ジ に 連結 する 

後付け で イベ ント を 定義 する の Gi 人 ム バト ー ニ ニー ド ドド ドド にし たく し 2・ く トト こく ここ 55 
計 後付け で イベ ント を 設定 する に は 「addEventListener」「attachEvent」 を 利用 する 

使用 し て いる ブラ ウザ で DOM が 使え る か どう か 判別 する 上 上 tt ド トーーー ド ーー 5 フ 7 
叶 DOM が 利用 で きる か どう か は 「document.getElementByld」 の 有無 で チェ ッ ク す る 

使用 し て いる ブラ ウザ が 何 な の か を 判別 する ドー バト (( こ : ド ピー ドド ドド ーー 58 
叶 ブラ ウザ の 判別 は 独自 プロパ ティ / メ ソ ッ ド と ユー ザー エー ジェ ント を 利用 する 

オブ ジェ クト や 変数 の 型 を 調べ る ・ 上 いい u ぃ ドド ドド トト トト トト トト した く し に し に し し くく しく 60 
則 オブ ジェ クト の 型 は 「typeof0」 で 調べ る 

オブ ジェ クト が 人 存在 し な い 場 合 の み 新 た に オブ ジェ クト を 生成 する ーーー 6 ら 
中 オブ ジェ クト の 有無 は 「 | 」 で 判別 する 

参 一 定時 間 後に 一 度 だ け 処 理 を 行う … バ トド ハハ ナー ドド ーー 64 
中 指定 秒 数 後に 一 回 の み 処 理 を 行う に は 「 setTimeout() 」 を 使う 

” 器 一 定時 間 ご と に 処理 を 繰り 返す ・ 上 上 t ニ ボーー…ーー パ (ドド ピー に に に に に に に ピピ 66 
中 指定 秒 数 ご と に 処理 を 行う に は 「setinterval() 」 を 使う 

複数 の JavaScript フ ァイル を 読み 込む ・… ぬ だ ビー ピ ビ ピピ ナ (レー に ーー ドド ーー ツー 68 


CHAPTER-03 フォ ー ム 








フォ ー ム の エレ メン ト を 制御 する 方 法 に つい て … パ ーー むー ドド に に ピピ ーー フ 0 
上 / 導 ペ ー ジ が 読み 込ま れ た ら 指 定 し た テキ スト フィ ー ル ド に フォ ー カ ス を 移す / ら 
則 フォ ー カ ス す る に は [focus() 」 を 使う 
テキ スト フィ ー ル ド の 内 容 を チェ ッ ク す る ーー ドー ドー ドド ドド ピピ に に に に に に ピー フ 4 
W「value@」 プ ロ パ ティ で テキ スト フィ ー ル ド や エレ メン ト の 内 容 を 読み 出し チェ ッ ク す る 
テキ スト フィ ー ル ド に 数 字 以外 が 入力 され て いる か 調べ る ドー ドド ドド ドー 76 
計数 値 か どう か の チェ ッ ク は 正規 表現 を 使う 
テキ スト フィ ー ル ド に 英文 字 以 外 が 入力 され て いる か 調べ る …… ド ドド ドー ドド ーー 78 
則 英文 字 か どう か の チェ ッ ク は 正規 表現 を 使う 
WK 尋 テキ スト フィ ー ル ド の 内 容 が 間違っ て いる 場合 一 通 だ け ハ イラ イト させ る ーー 80 
叶 「Effect.Highlight O 」 で ハイ ライ ト さ せる 
@K 久 』 バス ワー ド が 間違っ て いる 場合 に 左右 に 揺らす ーー ュー トバ ゆ ボ バト ぐ ( バ (ーー ュー ッ ゆ 9 ツ ツ (イー sf 





思 「Effect.Shake() 」 で 入力 エリ ア を 揺らす 
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数 値 以外 が 入力 され た ら メ ッ セ ー ジ を 表示 する 上 ぃ ババ ドド ( ド … ド ーーーーー 84 
財 数 値 か どう か チェ ッ ク を 行う に は 「Spry.Widget.ValidationTextField( 」 で 「real」 を 指定 する 

金額 以外 が 入力 され た ら メ ッ セ ー ジ を 表示 する バト (ドー ドド ドド ドド トド ーー 86 
金額 か どう か チェ ッ ク を 行う に は 「Spry.Widget.ValidationTextField() 」 で 「currency」 を 指定 する 

日 付 以 外 が 入力 され た ら メ ッ セ ー ジ を 表示 する 上 バド バ |S 馬 ーー ドド ドド ドド ーー 88 
計 日 付か どう か チェ ッ ク す る に は 「Spry.Widget.ValidationTextField() 」 で 「date」 と フォ ー マ ッ ト を 指定 する 

時 刻 以 外 が 入力 され た ら メ ッ セ ー ジ を 表示 する ・・ ド バーバ ト t( ポ …ーー ド ドド ーー d0 
財 時 刻 か どう か を チェ ッ ク す る に は [Spry.Widget.ValidationTextField() 」 で 「time」 と フォ ー マ ッ ト を 指定 する 

IP アド レス 以外 が 入力 され た ら メ ッ セ ー ジ を 表示 する 上 トド (ドル バド ドド ーーー 9 ら 
叶 IP アド レス か どう か チェ ッ ク す る に は 「Spry.Widget.ValidationTextField() 」 で 「ip」 を 指定 する 

URL 以外 が 入力 され た ら メ ッ セ ー ジ を 表示 する バド ト トム ・ ム ムネ で せ ー ヨ ヨー ヨーi イ むー ドド ーーー 4 
過 URL か どう か を チェ ッ ク す る に は [Spry.Widget.ValidationTextField() 」 で 「url」 を 指定 する 

メー ル ア ド レス 以外 が 入力 され た ら メ ッ セー ジ を 表示 する … パ ババ ドド ドド ドー 86 
叶 メー ル ア ド レス か どう か を チェ ッ ク す る に は [「 Spry.Widget.ValidationTextField() 」 で 「email」 を 指定 する 

入力 パタ ー ン を 指定 する ーー ド オル ドー ドド ドド トト トト トッ トト ッッ トト くく と ドド ドド ドー 98 
四 特定 の 形式 で 入力 制限 を 行う に は 「Spry.Widget.ValidationTextField() 」 で 「custom」 と 入力 パタ ー ン を 指定 する 
必要 な 項目 が すべ て 入力 され て いた ら 送 信 す る 上 上 ・ バ ーー トム (6i:i$ ぬ い ー ド < ドゥ < ド ネンド ストーー・ 100 
則 チェ ッ ク す る テキ スト フィ ー ル ド の ID 名 を 配列 に 入れ て お く 

[同意 し ます ] の ラジ オ ボ タ ン が ON に な っ た ら 送 信 ボ タン を 有効 に する ・………・… 10 ら 
則 ラジ オ ボ タ ン の 選択 状況 に 応じ て 「disabled」 プ ロ パ ティ を 操作 する 

どの ラジ オ ボ タ ン が ON に な っ て いる か 調べ る 本 ド トト バーム バブ ヨ デリ デデデ ー デ ーー に ドド に に に に に に ピー 104 
財 「getElementsByName () 」 で 同じ 名 前 の エレ メン ト を 取得 する 

どの チェ ッ ク ボ ックス が ON に な っ て いる か 調べ る 一 ti バ バ トム (」( ロ ドー ドド に に ーー 106 
較 調べ る 対象 と な る チェ ッ ク ボ ックス の ID 名 を 配列 に 入れ て お く 

チェ ッ ク ボ ックス が ON に な っ た ら テ キス ト フ ィ ー ル ド を 表示 する ーー 108 
則 テキ スト フィ ー ル ド の 表示 / 非 表示 は 「display」 プ ロ パ ティ を 操作 する 

チェ ッ ク ボ ックス が ON に な っ た ら テ キス ト フ ィ ー ル ド へ の 入力 を 許可 する ・…・…… ド …… 110 
チェ ッ ク ボ ックス の 状態 を 調べ て テキ スト フィ ー ル ド の 「disabled」 プ ロ パ ティ に 設定 する 

チェ ッ ク ボ ックス の ON/OFF に 応じ て テキ スト フィ ー ル ド を 追加 / 削 除 す る ・…………… 吊 居 
剛 「appendChild() 」「removeChild 0 」 で テキ スト フィ ー ル ド の 追加 / 削 除 を 行う 

セレ クト メニ ュー で 選択 され た 項目 を 取得 する ババ バム トム (ロー トド ドド < ドド 114 
剛 「thiS.value」 で 選択 項目 の 内 容 を 読み 出す 

セレ クト メニ ュー 項目 を 追加 する バド ーッ ゆ ぬ ゆ ッ ゆり ツ ん ルツ ji ドド ドド ドド ドー で こく いこ 116 
叶 セレ クト メニ ュー で 表示 され る 項目 を 追加 する に は 「new Option() 」 を 使う 

セレ クト メニ ュー 項目 に 応じ て 別 の セレ クト メニ ュー 項目 の 内 容 を 切り 替え る ‥…・…・… 118 


由 選択 状況 に 応じ て 配列 に 追加 項目 な ど を 用 意 し て お く 
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ボタ ン を クリ ッ ク す る た びに 異な る 処理 を ラン ダム に 行う ……… パ バド ドド ee 120 
l 配列 に 実行 する 関数 を 入れ る 

特定 の 条件 に 合う テキ スト フィ ー ル ド に 入力 され た 値 の み 加算 する ……………………・ 128 
財 「 名 前 + 番 号 」 の 組み 合わ せ で ID 名 を 指定 する 

フォ ー ム の 送信 ボタ ン が 押さ れ た ら 処 理 を 行う ・‥ 上 ドド ト バド u ーー ドド ーー 124 
財 入力 フォ ー ム の 「onsubmit」 に 送信 時 の 処理 を 指定 する 

フォ ー ム の リセ ッ ト ボ タン が 押さ れ た ら 処 理 を 行う … バ バド バー ニー ドド ーー ドー 126 
時 入力 フォ ー ム の 「onreset」 に リセ ッ ト 時 の 処理 を 指定 する 

ステ ー タ スバ ー へ の 書き 替え は 許可 な し に で き な い et 128 


CHAPTER - 04 画像 


画像 を 制御 する 方 法 に つい ーーーーー に に に に に に に に に 130 

5 一 定時 間 ご と に 画像 を 自動 的 に 切り 替え て 表示 する 上 ド い 上 ……t ぃ (ビビ パ ゆー ドド ーー 138 
計 タイ マー を 使っ て 一 定時 間 ご と に 画像 URL を 入れ 替え る 

5 マウ スカ ー ソ ル が 重なっ た ら 画 像 を 切り 替え る ドド ド ハト ド トド ドド ピピ ーー 134 
計 「onmouseover」 と 「onmouseout」 に 画像 を 入れ 替え る 処理 を 設定 する 

マウ スカ ー ソ ル が 重なっ た ら 複 数 の 画像 を 切り 替え る ・ 上 ドド ドド … ド ー ド ーー ドー 136 
叶 入れ 替え る 画像 URL は 配列 で 渡す 

画像 を クリ ッ ク す る た びに 次 々 と 画像 を 切り 替え て 表示 する 138 
Ml カウ ンタ を 用 意 し て 画像 URL を 設定 する 

クリ ッ ク し た と き に 画像 の サイ ズ を 変更 する バー ドド ドド ドド いい て 140 
MW あら か じ め サイ ズ を 示す スタ イル シー トク ラス を 用 意 し 入れ 替え る 

ブラ ウザ 上 の 画像 を 自在 に ドラ ッ グ する (Yahoo UI) ……( ぬ ⑦ ツ つ Q(…ー ド ドド ーー 143 
則 ドラ ッ グ 処理 は 画像 に ID 名 を 指定 し て 「YAHOO.utiIDD)」 を 使っ て 設定 する 

マウ スカ ー ソ ル が 重なっ た ら 画 像 が 浮き 出る よう に する ……………… ド ドド mm 145 
叶 「Effect.Opacity)」 で 不透明 度 の 変化 を 設定 する 

スラ イド の よう に 画像 を 表示 する ババ トニ ドド ドド ドド ドド ドレ に トト に トト トッ 147 
l LightDox で スラ イド 表示 させ る に は [「rel」 属 性 に 「lightbox」 を 指定 する 

サム ネー ル を クリ ッ ク し た と き に 画像 を 拡大 し て 表示 する ーーーーーー… 149 


則 Highslide が 利用 する 各種 スタ イル シー ト と ID 名 を 指定 する 


連想 配列 の キー に 数 値 を 使っ て は いけ な いい 15 ら 


CHAPTER- 05 ダイ アロ グ / ウ ィ ン ド ウ 
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アラ ー ト ダイ アロ グ を 開く バト むむ ハリ ーーーーー( ドド ドド に ドレ に に に に に に に ピピ ーー 154 
則 ダイ アロ グ を 表示 する に は 「alert) 」 を 使う 
「066 | 確認 の ダイ アロ グ を 開く 一 ttt ベ t ト ドー ドド ドド ドド に に に に ーー 156 
時 確認 ダイ アロ グ を 表示 する に は 「confirm() 」 を 使う 
請 移 4 文字 入力 ダイ アロ グ を 開く ドー ト ハト ii レ ナナ プチ ドド ドド ドド に に に に に にし 158 
則 文字 入力 ダイ アロ グ を 表示 する に は 「prompt 0 」 を 使う 
068 モー ダル ダイ アロ グ を 開く PLCLXLSXOEYORRORRLRKOKICLCCRCCRCSORORORORORROOROEORORROROROROROKCEOROE 160 
則 モー ダル ダイ アロ グ を 表示 する に は 「showModalDialog() 」 を 使う 
「069 | サブ ウィ ンド ウ を 開く 一 ポ バハ ーー ドド ドド ドド に に に に に に に に に ピー ピー 163 
財 サブ ウィ ンド ウ を 表示 する に は 「window.open(0」 を 使う 
サブ ウィ ンド ウ か ら 親 ウィ ンド ウ の ペー ジ を 切り 替え る 上 ー… パ (ドド ドド ドド ーーー 166 
則 サブ ウィ ンド ウ か ら 親 ウィ ンド ウ を 操作 する に は 「window.opener」 を 使う 
親 ウ ィ ン ド ウ か ら サ ブウ ィ ン ド ウ の ペー ジ を 切り 替え る 上 ド ぬ ー ド ドド ーーー 169 
由 サブ ウィ ンド ウ を 操作 する に は 「window.open() 」 の 戻り 値 使 う 
f 多 ペー ジ 内 に マル チ ウ ィ ン ド ウ を 表示 す る ドバドバ ドム ポ ゆ ボム (ii ドド ドド ドド トド に し に に こい 17 ら 
則 ペー ジ 内 に マル チ ウ ィ ン ド ウ を 表示 する に は Prototype Window Class ラ イブ ラリ を 利用 する 
Prototype Window Class ラ イブ ラリ を 利用 し て アラ ー ト ダイ アロ グ を 表示 する ・…・ 175 
財 アラ ー ト ダイ アロ グ を 表示 する に は Prototype Window Class ラ イブ ラリ の 「Dialog.alert() 」 を 使う 
Prototype Window Class ラ イブ ラリ を 利用 し て 確認 ダイ アロ グ を 表示 する | 
則 確認 ダイ アロ グ を 表示 する に は Prototype Window Class ラ イブ ラリ の 「Dialog.confirm () 」 を 使う 
本 月 別に サブ ウィ ンド ウ に ファ イル や 画像 を 表示 する ……… パ ドド ドド ドド ドー ビー 179 
唱 ファ イル 名 と 月 の 値 を 組み 合わ せる 
関数 定義 の 動作 の 違い トバ ( 和 ーー ドド ドド ドド に に に に しい し 180 
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CHAPTER-06 DOM 


特定 の を 持 ラ オプ ジェ エク トド に アク セス ぴる cosccserststiksetssssseeeestreseeos 18 ら 
過 |D 名 の 取得 は 「getElementByld() 」 を 使う 
6Z4 特定 の タグ 名 を 持つ オブ ジェ クト を 制御 する ・ バ バド に (ポト ( ポ ボ ヨ ボボ コ ボコ uv ド v ド ドド ドー 184 
叶 「getElementsByTagName () 」 を 使っ て タグ 情報 を 取得 する 
特定 の 名 前 を 持つ オブ ジェ クト を 制御 する ドド ぃ ーー ドド ドド ドド ーー 186 
MM 「document.getElementsByName () 」 を 使っ て タグ 情報 を 取得 する 
特定 の クラ ス 名 を 持つ オブ ジェ クト を 制御 する ドド ト ト uiー ツ パー ドド ドド ドド ーー 188 
四 特定 の クラ ス 名 の 取得 に は 「$$() 」 を 使う 
Wi 特定 の 階層 構造 を 持つ オブ ジェ クト を 制御 する 上 トバ バト バ (( ホ ホ ボ ボ ヨロ ーー ぃ ドド ピー ピピ ーー 190 
昌 特定 の 階層 構造 の 取得 に は 「 getElementsBySelector (0 」 を 使う 
ペー ジ に テキ スト を 出力 する 上 の バド ドド にし に oe 192 
則 ペー ジ 上 に プレ ー ン な テキ スト を 表示 する に は 「textContent」 ま た は 「innerText」 を 使う 
ペー ジ に HTML デ ー タ を 出力 する バー の ドド ドド ドド に に に に に に に に に に 194 
叶 HTML タ グ を 反映 させ て 表示 し た い 場 合 は 「innerHTML」 プ ロ パ ティ を 使っ て 表示 する 
2 ノー ド の 値 を 参照 / 設 定 す る 上 よ ーー ドド に に て て 196 
叶 ノー ド の 値 は 「nodeValue」 で 参照 や 設定 を 行う 
ノー ド の 種類 を 読み 出す 上 … 上 ゆ i……ー ド ドド ドド ドド ドド に に に 198 
叶 ノー ド の 種類 は 「nodeType」 で 取得 する 
085 ノー ド の タタ グ 名 を 読み 出す (99203W08 (8 きき 69 < る (0618CCWYWYaVC が 9 る 10 お et0W08RSNSR8O16NG7 82 200 
則 タグ 名 は 「tagName」 で 取得 する 
ノー ド の 属性 値 を 参照 / 設 定 する 上 パ モー デー デニー ヨー テル レ ゆ ツバ むれ ※ー ド ドド に に に に に に ーー 20 ら 
昌 属性 の 読み 出し は 「getAttribute() 」、 設 定 は 「setAttribute)」 で 行う 
6 中 ノー ド を 複製 し て 追加 する 上 ーー バ ーー( ドド ドド に に に に に に ーー 204 
叶 ノー ド を 複製 する に は 「cloneNode (0 」 を 使う 
088 ノー ド を 削除 する COLKOKTTKT TSCD KR KRKK REEDRKRKORORORORSCOSKKJR REOKEORLRTNIPLLYCOLO 206 
則 ノー ド を 削除 する に は 「removeChild 0 」 を 使う 
「089| 前 後 の ノ ー ド を 参照 する ※… パ i… バ ーー ドド ドド ドド に に に に に ーー 208 
叶 「previousSibling」「nextSibling」 で 前 後 の ノ ー ド を 参照 する 
テキ スト ノー ド を 作成 する ーー ドド ドド ドド に に に に ーー ら 10 
叶 テキ スト ノー ド の 生成 は 「document.createTextNode () 」 を 使う 
09 引 エレ メン ト を 作成 する NYA 人 80<18 に る MGS1S uv:eTPC の ie ノウ PP PTBJ6LSVSCADSU SL&C619ES02NKGNB16G ら 1 ら 


詳 エレ メン ト の 生成 は 「document.createElement (0 」 を 使う 
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所 @ ぐ BINIRN) 


まとめ で ウー ド を 追加 お る 上 ム ぐ … の で e3 3 こさ コン シェー も と さす ら 214 
l 大 量 の ノー ド を 追加 する 場合 は 「document.createDocumentFragment() 」 を 使う 


HTML ペ ー ジ 内 の コメ ント 内 容 を 取得 する に ーー ドド に ら 16 


CHAPTER - 07 スタ イル シー ト 


094 


095 


〇 


〇 


ー ー ー ー 〇 
の 〇 〇 〇 
の) DS) ーー 〇 | 


98 














メタ イリ ジー ド を 削 御 ボ る 記法 に つ し 放し しく rayoreroerersereniaresareoreresacareras 218 
剛 読 み 出 すこ と が で きる スタ イル シー ト プ ロ パテ ィ 値 は 状況 に より 異な る 

妥 放 名 ど 背 東名 を 設 守 eg まい SN の discussUAeieeueS saeieegYtisiesuedcoes らら ら 
由 文字 色 は [color」、 背 景色 は 「backgroundColor」 で 指定 する 

2 月 麻 和 を 設定: の 2 ンー クッ テ ッッ る る で の 22 の 30diatetieteyeeStekeushfSF2190eWASieieteneioysedisieiors:aiaib 224 
則 不透明 度 は 「opacity」、「fers.alpha.Opacity」 で 指定 する 

現在 の スタ イル 情報 を 読み 出す ・・・・ バ (トド ドー トト トト トト トト トト トト て ・ く ここ て ここ てこ てこ 226 
スタ イル シー ト の 値 は 「getPropertyValue() 」、「getAttribute() 」 で 取得 する 

タイ リル ジー トド タラ ヌス を 入れ 替え る | ・o 和 eeeseeoaaoeneevenoniesseissssss 228 
財 スタ イル シー トク ラス は [「classSName」 プ ロ パ ティ に 設定 する 

複数 の クラ ス が 指定 され て いる 場合 に スタ イル シー トク ラス を 入れ 替え る ‥‥…・… ら 30 
複数 指定 され て いる 場合 は 正規 表現 を 使っ て スタ イル シー トク ラス を 置換 する 

画像 や エレ メン ト の 表示 / 非 表示 を 切り 替え る トト バム バト トト トー トート ーー トー・ ら 32 
時 スタ イル シー ト の 「visibility」 プ ロ パ ティ で 表示 / 非 表示 の 設定 を 行う 

クリ ッ ク で 内 容 を 展開 し て ペー ジ 内 容 を 押し 下げ る いい ・ ト ト ー ト ドー ドー ドー 234 
財 スタ イル シー ト の 「display」 プ ロ パ ティ で 内 容 の 展開 / 折 り た た み を 行う 

ボタ ジウ クリ ウ 多 で CSS ジ ァ イ 少 を 切り 替 和 る し 2 に くく の seatisesAeSieosesRNsdee 236 
肝 <link> タ グ の 「 href」 属 性 に スタ イル シー ト フ ァイル の URL を 指定 する 

時 間 帯 別に @SS ジ ァイル 友 切 5 替 先 る で esseseSaaotoseseesha 238 
則 スタ イル シー ト フ ァイル 名 を 工夫 し て 時 間 を 示す 値 を 追加 レ し て お く 

用 ミード だ 生 稀 9 サコ の の GO の geoae 823rerSRtet2fatatoceieipyStetdeS23 ら IS ここ と な ささ な な っ らら 240 








則 「disabled」 ブ プロ パテ ィ で 有効 / 無 効 を 指定 する 


回 三 カ 滑 変 数 の ヌコ ヨー ジリ で さて で Seen es ミュ キミ ミシュ 3 こっ ら 4 ら 


CHAPTER-08 イベ ント 








イベ ント の 発生 し た タイ ミン グ で イベ ント オブ ジェ クト か ら 情 報 を 取得 する ・………・…… 844 
lInternet Explorer と それ 以外 で 異な る イベ ント の 扱い に 注意 する 
イベ ント の 設定 と 解除 を ボタ ン 操 作 で 切り 替え る ドー む ド バド ベー 246 
叶 イ ベン ト を 追加 する に は 「addEventListener ( 」「attachEvent() 」 を 使う 
106| ペー ジ が 読み 込ま れ た タイ ミン グ で 処理 を 行う トド ト トー ド ババ ロ ーーー 248 
昌 「window.onload] で ペー ジ 読 み 込み 時 の 処理 を 指定 する 
le 画像 や エレ メン ト な ど を ドラ ッ グ で きる よう に する トム ー ぃ ゆ ム ド バド バ パー ドー 250 
ドラ ッ グ を 実現 する に は script.aculo_us ラ イブ ラリ の 「new Draggable () 」 を 使う 
押さ れ た キー の キー コー ド を 取得 する トー に ム ト (トー トド ドド トド トト ト トト トト トト トレ トト レー ュー・ーー・ ら 5 ら 
則 キー コー ド は 「keyCode」 プ ロ パ ティ で 取得 する 
現在 の マウ スカ ー ソ ル の 座標 を 取得 する 上 バト りー トバ トト バド トト トト ドド ドド トト ト <・< ト ト スト ッッ て ーー ここ 254 
央 座標 を 取得 する プロ パテ ィ は プラ ウザ ご と に 異な る の で 注意 が 必要 
マウ スカ ー ソ ル を 重ね た と き に 表示 され て いる 文字 列 を 入れ 替え る 256 
叶 ID 名 と 表示 内 容 を ペア に し て 変数 に 入れ て お く 
上 罰 イベ ント が 発生 し た オブ ジェ クト (タグ ) に より 動作 を 変え る も …… バ ーー 258 
イベ ント 発生 時 の ター ゲッ ト を 取得 する 
まだ 生成 され て いな い オ ブ ジ ェクト に アク セス し て エラ ー・…… ド ドド ドー ドー… どら 60 


CHAPTER - 09 文字 列 


テキ スト フィ ー ル ド に 入力 し た 文字 列 か ら 1 文 字 だ け 抜き 出す …… バ ーーー 568 
則 文字 列 か ら 1 文字 抜き 出す に は 「charAt() 」 を 使う 

指定 範囲 の 文字 列 を 抜き 出す トド ババ パール バト トト トド て ドー ドド ドド トト トト トト トト トト トト トト くし し て て てこ ここ 264 
昌 指定 範囲 の 文字 列 を 抜き 出す に は 「substring() 」 を 使う 

指定 位置 か ら 指定 され た 文字 数 だ け 抜 き 出す 上 トド に ホー レー ナー じ ヒー ドー 286 
叶 指定 され た 数 の 文字 列 を 抜き 出す に は 「substr() 」 を 使う 

反 学 別 あ 3 軸 結 2 の 2 まき で うさ おる 3f 氏 DSSV&StAeSNS eeeie72feivfey2prsceeteicoe2sfe に GU 268 
四 文 字 列 の 連結 に は + 記 号 を 使う 

六 補 列 の 中 が ら 特 定 の 及 字 を 削除 衣 計 oh EeeRienoeyoeeeeeeddeee es ら フ 0 
TSpltO」 と 「join() 」 を 組み 合わ せ て 特定 の 文字 列 を 削除 する 

指定 だ 及 宗 列 が 存在 ずる が 吊る) の oneeyeesoasbu2Seue ersszsrsas3 see っ フ ら 


則 文字 列 を 検索 する に は 「indexOf() 」「lastiIndexOf 0 」 を 使う 
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CONTENITS 





条件 に マッ チ す る 文字 列 や 数 値 が ある か 調べ る 一 ーー ハバ (に に に に レレ ら フ 4 
較正 規 表 現 を 使っ て 検索 する に は 「match() 」 を 使う 

119| 文字 列 を エン コー ド / デ コー ド す る ーーーーー ド ーー ドド に ーー ら フ 76 
計 エン コー ド / デ コー ド に は 「encodeURIComponent() 」「decodeURIComponent() 」 を 使う 

1 文字 ずつ ペー ジ 上 に 文字 を 表示 し て クリ ッ ク で 一括 表示 する ーー 878 


計 「setTimeout() ] を 使っ て 定期 的 に 文字 を 表示 する 
則 Internet Explorer7 で は 「XMLHttpRequest」 が 使え る 


放 還 ペー ジ が 読み 込ま れ た ら 更 新 情報 を ペー ジ 内 に 流し 込む ……… ド ドー ドー 280 
非同期 で ペー ジ 内 に テキ スト /HTML フ ァイル を 表示 する に は 「new Ajax.Updater () 」 を 使う 
文字 列 の 連結 を や め て 「join()」 を 使っ て 実行 速度 を 上 げ る ら 8 ら 


CHAPTER - 10 日 付 / 時 刻 


現在 の 日 付 を 表示 する バト ハ ハ ( ニ ナ ず ニュ せ コ に ドド ドド に にし に に し て 284 
則 「Date」 オ プ ジ ェ クト の 名 種 メ ソ ッ ド を 使っ て 日 付 情報 を 読み 出す 
現在 の 時 刻 を 表示 する ババ ピ ナ ヂ デ ピ ※ ス ピナ チヨ ボ プ 務 デ ジレ ピコ ドー ドー ドド ドド に に に に に に に に 286 
則 「Date」 オ プ ジ ェ クト の 名 種 メ ソ ッ ド を 使っ て 時 刻 情報 を 読み 出す 
n 日 後 を 求め る ーー バー ドド ドド に に に に に に に に に に に に に に に し に し に し にし いて 288 
W「Date」 オ プ ジ ェ クト の 引数 に 経過 秒 数 を 指定 する 
壇 記 実行 時 間 を 計測 する パパ バ パニ ※ ニ テ ネ ニュ ドド ド ドド ドド ドレッド トト トト し トド に ここ 29g0 
唱 開始 時 と 終了 時 に 生成 し た 「Date」 オ ブ プ ジ ェ クト の 差分 を 求め る 
リア ル タ イ ム に 時 刻 を テキ スト で 表示 する 上 トー トド … ド ー ド ドド に に に に に に に に てい ら 92 
リア ル タ イ ム に 時 刻 を 表示 する に は 「setlnterval() を 使う 
リア ル タ イ ム に 時 刻 を デジ タル 時 計 風 の 画像 で 表示 する ーー 2g4 
中 画像 で 時 刻 を 表す に は <img> タ グ の 「 src」 プ ロ パ ティ に 時 刻 を 示す 値 に 対応 し た 画像 を 設定 する 
128 り リアルタイム に 時 刻 を アナ ログ 時 計 で 表示 する ROCKEEE さ すす で です すす すすま すま すす すすま まま すす すま ら 96 
則 アナ ログ 時 計 は 画像 を 事 ね て 時 計 を 表現 する 
「Date」 オ ブ ジ ェクト の 扱い 上 ーー ドド ドド に に に に に ピピ ーー 298 


(WS@)NBHHNIRN) 


CHAPTER- 11 その 他 











叉 タブ 区 切り 形式 の デー タ を 読み 込ん で 表示 する ドド t ド ドド ー ド ババ ポー ドー ドド ーー 300 
則 protOtypeJS ラ イブ ラリ を 利用 し て 非同期 で 読み 込ま せ タ ブ コ ー ド で 分 割 する 
1 上 K10) CSV 形 式 の デー タ を 読み 込ん で 表示 する た た まま ま 信 福生 すき きき きす きき 30 ら 
則 prototypeJS ラ イブ ラリ を 利用 し て 非同期 で 読み 込ま せ 「,」 で 分 割 する 
XML 形式 の デー タ を 読み 込ん で 表示 する ドド ハ @( バ バ ホー 304 
叶 prototype.」.S ラ イブ ラリ を 利用 し て DOM と し て XML デー タ を 処理 する 
攻 匂 JSON 形式 の デー タ を 読み 込ん で 表示 する ドド ト ハ ヘ ホ ぬ ーー バー ドー ドド ドド ーー ーー ペー 30 フ 
請 通常 の テキ スト デー タ と し て 読み 込ま せ 「eval() 」 を 使っ て 利用 可能 な 状態 に する 
Adobe Spry を 使っ て XML デー タ を 読み 込ん で 表示 する 上 …… パ ドド ドド 309 
則 XML デー タ を 表示 する 部 分 は HTML 文書 内 で {--) を 使っ て 指定 する 
該当 する XML デー タ だ け を 表示 する ・ バ トバ ホー バト トド トド ドド ドド トト トト < トト トト 2 し に こてこて ここ 5 角間 | 
中 Spry:When を 使っ て 条件 を 指定 する 
散 庄 XML デー タ を ソー ト し て 表示 する バト トート トド ドド トド トト トト < トト トト トト トッ ッッ ここ ここ て 313 
MWTsetColumnType()」 で 対象 デー タ の 型 を 指定 後に 「sort() 」 を 使っ て ソー ト 処 理 を 行う 
降旗 HTML テ ンプ レー ト を 利用 する 一 ド ド ドド ーー トド ドド ドド ドド トト トト トト トー 315 
l テン プレ ー ト を 生成 し て 「evaluate()」 で 置換 する 
駅 狼 別 フ ァイル に デー タ を 渡す ボー ゆ ポ ワ ピナ 馬 ーー に ドド に に に 人 受 4 
則 クエ リ 文字 列 と し て 受信 側 の ファ イル に 送信 する 
グラ ラフ を 表示 する の ぐ の (i ブ 0 の eee 319 
則 Plotr ラ イブ ラリ を 使っ て グラ フ を 描画 する 
芽衣 クッ キー の デー タ を 読み 書き する トト バー コー ドド ドド ドレ レト トト て て こてこて 31 
叶 クッ キー の 読み 書き は 「document.cookie」 に アク セス する 
オブ ジェ クト へ の 参照 を 代入 し て 実行 速度 を 上 げ る ……………………… 324 


CHAPTER- 12 GUI 関 連 


ツリ ー ビ ピュ ーー を 表示 する heresresei 和 oasiseaa se ee 3826 
計 ツリ ー ピ ュー の ノー ド に 表示 テキ スト を 追加 する 

アコ ー デ ィ オ シ ジ 家 示 を 行う eee 328 
計 Adobe Spry フ レー ム ワ ー ク を 使っ て アコ ー デ ィ オ ン を 表示 する 

の ネル 表示 だ る 3 の saterReAwA4 (41 の 32YR328SIRR:GGRGRGROIGISEGeieiieteie/ の る 2 る 330 


則 Adobe Spry フ レー ム ワ ー ク を 使っ て パネ ル を 表示 する 




















タブ パネ ル 表 示 を 行う …ーーーーーー む (ドド に ピピ ーー EE 
lW Adobe Spry フ レー ム ワ ー ク を 使っ て タブ パネ ル を 表示 する 
タブ に 表示 する 内 容 を 別 フ ァイル に し て 非同期 で 読み 込ま せる ドー 334 
叶 Yahoo UU ラ イブ ラリ の タブ プ ビ ュー を 使っ て 非同期 で 読み 込ま せる 
玉 還 階層 化 メ ニュ ー を 表示 する バト ー ツ トド ドド ドド < トト トト 2 し に て に て し に し 336 
四 障 層 化 は <u> タ グ を 入れ 子 に し て 実現 する 
スラ イダ ー を 表示 する ttーー 較 ビビ ツ ツ ュ ーー ドド ドド に に に に に に に に に に ーー 338 
W ControlSlider で スラ イダ ー の 生成 と 設定 を 行う 
カレ ンダ ー を 表示 する トバ ーー ドド ドド ドド トド トト に に に し に し に し に し に し いし し らし に し 34 1 
財 Yahoo U ラ イブ ラリ の カレ ンダ ー を 利用 する 
太 庄 カカ ラー ピッカー を 表示 する ーーー バート G ト トド ドド ドド < トド トト にし に た に し し し しゃ し くら 343 
叶 カラ ー ビ ピッ カー を 表示 する ライ ブラ リ を 利用 する 
玉 誠 ウィ ザー ド 形 式 で 画面 を 切り 替え る 上 i ト ili オ がい 有 有 Qd ドド ドド ドド 345 
則 ウィ ザー ド 形 式 の 画面 を 構築 する に は Dojo の Wizard ウ ィ ジ ェ ッ ト を 利用 する 
デバ ッ ガ を 使っ て 不具 合 を 解決 する ・‥ ド トバ ドーー( バ パー ドド ドド ーー 348 
(上 | GODPPDPPPPDCCPKPPP か IP に OFPPIPPPPPKCPPEPYY で 『 ド すす ドミ を と を いで と と いい つつ 349 


サン プル デー タ の ダウ ン ロ ー ド 方 法 

















本 書 の サン ブル デー タ は 、CSHR 研 究 所 の ホー ムペ ー ジ に ある 「 デ ー タ 館 」 と いう ペー ジ か ら ダ ウン ロー ド す る ご 
と が で きま す 。 本 書 の サン プル を 入手 する に は 、 次 の よう に 操作 し ます 。 な お 、 本 書 の サン プル を 入手 する 際 は 、 
18 ペ ー ジ に 記載 し て ある ユー ザー 名 と パス ワー ド が 必要 に な り ま す 。 


一 CSR 研 究 所 の ホー ムペ ー ジ 圏 
httD://WWW.C-r.COIm 








還 CsR 研 究 所 omay 


ノベル ティ グッ ズ が 当たり ます 。 ど し ど し ご 応 葛 を ! 














横山 利和 河合 便 引 / 著 守田 裕司 / 香 
や さ し く 学ぶ エク セル VBA 
下 JavaScript テ クニ ッ ク ブ ッ ク 


SM 還 誠二 そ る 2 多 計 較 Fi 記 < も で きる 速 読 | 
書店 様 向け ペー ジ - 較 ィ 本 の 本 通信: 雪 込 み へ 


















CSR 研 究 所 の ホー ムペ ー ジ を 表示 し 、 
「 デ ー タ 館 」 を クリ ッ ク し ます 









デー タ は すべ て ウィ ルス チェ ッ の で ご 下さ い 。 か 

Windows 対 応 の 書籍 の サン ブル デー タ は WINZIP と いう 圧縮 ツー ル で ZIP 形 式 に 圧縮 され て いま す 。 ダ 
ウン ロー ド し た ファ イル を 解凍 < 元 に 戻す ) に は 、 専用 の 解凍 ツー ル が 別 達 必要 に な り ま す 。 

リー 詳 は 次 の 【 硬 ダウンロード を 局 は せる だ め の ニ こさ いい i が 


ョ ーー ヘレ 
マー ンー ンー ンー ンー ンー ンー ンー ンー ンー ンー ンー ンー ンー この シン へ で 






本 書 の 書籍 名 の リン ク を 
クリ ッ ク し ます 
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サン プル の ダウ ン ロ ー ド に 必要 な 
ユー ザー 名 と パス ワー ド 


www_c-r.com に 捧 紅 


jStD 


Please enter usernarme & password 
ユー ザー 名 (U: | 才 se - 
パス ロー ド ⑥): Eo 











口 )/ ウ ワー ド 起 情 す る 0 








JavaScript デ テクニック ブッ ク 
べく サ ン ブ ル デ ー タ の ダウ ン ロ ー ド ベー ジッ > 


※ 目 次 を 見 る に は ここ を クリ ッ ク し て くだ さい 





6 目的 の 章 の サン プル デー タ の 
リン ク を 右 ク リッ ク し ・…・ 









の 末 条 和議 ie n1 ip/ ロ KR) 
聞 〈⑩) 


馬 和 曲っ HAPTER-2 基本 テク ニッ パ 






馬 控 時 HAPTER-03 フォ ー ム (js 03| [対象 を ファ イル に 保存 (A)] を 


選択 し ます 





馬連 早 っ HAPTER-04 画像 js 04zip」 ジー トカ ッ ト On ビー① 


生計 補 時 っ HAPTER-05 ダイ アロ グ ノリ お 気に入り に 追加 (⑥) 
プロ ティ) 
重 仙 切 是 っ iAbTFR-nG_DONis nR zin/5GER 


w 


名 前 を 付け て 保存 回 IE 
保存 する 場所 | ( 鞍 テス メ ウ トップ 


回 マイ ドキ ュ メ ト 
| 重 マ イ エピ ュー タ 
最近 使っ た ファ イル | 所 マ イ ネッ トワ ー ク 










E 保存 先 を 指定 し ます 














| 
| L 
| 区 外 2 










ャ ジ 
マイ F ュ ルト 











マイ ヤセ ピュ ー タ 


MM クリ ッ ク し ます 









イネ ットワーク ーー アイ ル 名 た Dap 


アイ ル の 種類 D。 | 圧 答 cp 形式 ! フ ォ ル ダ 7 マ 














サン プル デー タ は ZIF 形 式 で 圧縮 され て いま す 。 パソ コン の OS が Windows XP の 場合 は 、 ダ ウン ロー ド し た サ 
ンプ ルフ ァイル (「js_01.zip] な ど ) を 右 ク リッ ク し て [すべ て 展開 (A)] を 選択 する と 、 解 閑 す る こと が で きま す 。 









JavaScript の 
太 人 知 識 








eakeN 間 | 


上 JavaScript の 概要 





に 





書 泊 震 員 SduoSBABT 上 10-dldyHO 目 目 上 上 目 | 





還 証 め め >) JavaScript と は 


JavaScript は 手軽 な スク リプ ト 言 語 の 1 つ で す 。 JavaScript は 多く の ブラ ウザ に 搭載 され て お り 、 ペ ー ジ 
上 の 画像 や テキ スト の 切り 替え 、 非 同期 通信 を 使っ た デー タ 処 理 な ど に 利用 され て いま す 。 よく 見 か ける 画像 
の ロー ルオ ー バ ー も 多く は JavaScript に より 実現 され て いま す 。 

JavaSoript は Internet Explorer や Firefox、Safari な どの ブラ ウザ に 搭載 され て いる た め 、 ブ ラウ ザ 専 用 
の スク リプ ト 言 語 と 思わ れ が ち で す 。 し か し 、JavaScript は Windows や MacOS X な どの 0S、Adobe 
Photoshop な どの アプ リケーション 、Adobe Flash や PDF な ど に も 搭載 され て お り 、 幅 広く 利用 され て いま 
す 。 それ だ け 柔 軟 な 言語 仕様 と もい えま す 。 

JavaSoript の 基本 と な る 部 分 の 仕様 は ECMA に より 公開 され て お り 、ECMA Script と し て 呼ば れ て いま 
す 。 こ の 基本 部 分 に ブラ ウザ や アプ リケーション が 、 状 況 に 応じ て 独自 の オブ ジェ クト を 追加 し た スク リプ ト 言 語 
が 一 般 的 に いわ れる JavaScript で す 。 

また 、 マ イク ロ ソ フト 社 の 場合 は 、JavaScript と 互換 性 を 持っ た 独自 拡張 の スク リプ ト 言 語 「JScript] と し て 
ブラ ウザ な ど に 実装 され て いま す 。 JScript で は Windows 固 有 の Active X を 利用 し た 処理 (ファ イル 処理 な 
ど ロ ー カ ル 環 境 の 制御 な ど ) も 可能 に な っ て いま す 。 

_ ECMA の ホー ムペ ー ジ 





secm wnwwxnows StandardseTnternet Speed 2 な 0 0000 412 な 00 
一 wstsEomal 一 ん 、 standerds 


Eoma tnternational is an 


devdic 
standardizativ on of 
informtation and 
commtumication 


Welcome る Pe 








Since 1961 and conhnuing in full force today, Ecma Latest News 
Tnternational faciitates the tmely creation of a wide range 

of global information and Communications GRoo5/ Gcr) ee 
and Consumer 日 ectronics (CE) standards, 














by the 923 ceneral 
Assembly, December 7, in 


Zunch. 











人 イン ター ネッ ト | 保護 モー ド : 有効 1009% 


了 y プロ ト タ イ プ 指 向 の オブ ジェ クト 指向 言語 

JavaSocript は 、Java な どの 一 般 的 な クラ ス を 利用 し た プロ グラ ミン グ 言 語 と 異な り 、 基 本 と な る オブ ジェ ク 
ト を 拡張 / 派 生 さ せる プロ ト タ イ プ 指 向 の オブ ジェ クト 指向 言語 で す 。 た だ し 、 当 初 実装 され た ブラ ウザ で ある 
Netscape ら と 現時 点 の も の で は 異な っ て いる 部 分 が 多く あり ます 。 当初 は プロ ト タ イ プ に よる 継承 も な く 、 単 
純 な オブ ジェ クト 指向 言語 で 変数 名 や 文字 数 制限 、 利 用 で きる オブ ジェ クト な ど 多 く の 制 限 が あり まし た 。 これ 
が 、 次 第 に 改良 され 現在 に 至っ て いま す 。 





y Ajax の 普及 と ライ ブラ リ の 登場 

ブラ ウザ の 普及 と と も に JavaScript も 改良 され まし た が 、 ブ ラウ ザ に よっ て 実装 が 異な り 動作 も 異な っ て し 
まう こと が 多く 、 制 作者 泣か せ の 言語 で ある こと も 確か で す 。 これ を 解消 する の が JavaScript ラ イブ ラリ で す 
(46 ペ ー ジ 参照 ) 。 Ajax の 普及 と と も に 婦 速 に ライ ブラ リ が 整備 され て き て いま す 。 も っ と も 有名 な の は 、 
prototype.jS で す 。 これ は JavaSoript の 言語 特性 を 利用 し 各種 メソ ッ ド を 拡張 し 、 よ り オ ブ ジ ェクト 指向 の プ 
ログ ラム が 作成 で きる ライ ブラ リ で す 。 し か し 、MacOS X + Internet Explorer 5 な ど 少 し 古い ブラ ウザ で は 
読み 込ん だ だ け で エラ ー と な っ た り 動 作 し な いこ と も あり ます 。 ライ ブラ リ を 利用 すれ ば 楽に は な り ま す が 、 少 
し 前 の ブラ ウザ に 対応 させ る と いう つう 要 望 が 出 た 時 点 で 破綻 する こと も あり ます 。 


了 y HTML/ ス タイ ル シ ー ト も 含め て JavaScript で プロ グラ ミン グ す る 

JavaSoript の プロ グラ ム が 簡単 に な る か 、 複 雑 に な る か は HTML の 構造 に 大 きく 依存 し ます 。 この た め 、 単 
純 に HTML コ ー ダ ー が 正しい 文書 構造 を 作成 し て も 「 正 し いけ ど 使 えな い 、 役 立た ず ] に な っ て し まう こと が あ 
り ま す 。 これ は HTML だ け で な く 、 ス タイ ル シ ー ト に も いえ ます 。 スタ イル シー ト で 、 ど ん な に うま く デ ザイ ン し 
て も JavaScript で 制御 する 際 に は 、 仕 様 を 変更 し た り 修正 し な いと 駄目 な こと が あり ます 。 

特に まず い の は 、JavaScript 側 で スタ イル の 数 値 な ど を 指定 し な けれ ば な ら な いと いっ た 状況 で す 。 この よ 
うな 状況 が 発生 する と ファ イル は HTML、 ス タイ ル シ ー ト 、JavaScript と 分 か れ て いる の に 、 デ ザイ ン の 修正 は 
JavaScript プ ログ ラマ が 行わ な けれ ば な ら な いと いう 本 未 転倒 な 事態 が 派生 し て し まい ます 。 この 辺り は 、 制 
作者 同士 で よく 検討 すべ き で し ょ う 。 

近年 、Web 標 準 仕様 治っ て ペー ジ を 制作 する の が 一 般 的 に な り ま し た が 、HTML、 ス タイ ル シ ー ト に 関し て 
は さま ざま な 手法 が 開発 され 全体 的 な レベ ル も 向上 し まし た 。 し か し 、JavaScript 部 分 は 意外 と 古い まま の 実 
装 や 考え 方 の まま 使わ れ て いる よう で す 。 そこ で 本 書 で は HTML、 ス タイ ル シ ー ト 、JavaScript を 分 離し 、 次 の 
ステ ッ プ に 進め る よう な 踏み 台 の よう な 感じ で サン プル を 用 意 し 掲載 し こ て い ます 。 DOM ス クリ プティ ング を 行っ 
て いる 人 に は 、 不 満 も わる か も し れ ま せん が 、 次 の ステ ッ プ に 進む た め の 参 考 に な れ ば 充分 と 考え て いま す 。 


[Tiilm Ajax と は 


Google Maps の 登場 で 注目 され る よう に な っ た の が Ajax(「Asynchronous JavaScript + XML」 を 
略し た 名 称 ) で す 。 これ は 、JavaScript を 使っ て 非同期 通信 を 行う 処理 を 示し ます 。 これ に より ブラ ウザ で 
何 か 処 理 を 行う た びに ペー ジ を 切替 える こと が な く な り 、 よ り 使い や すい ユー ザー イン ター フェ ー ス を 提供 
で きる よう に な り ま し た 。 当初 は Ajax の 名 前 の 通り 、JavaScript で XML デー タ を 処理 する の が 基本 で し た 
が 、 現 在 は XML デー タ だ け で な く 、JSON 形 式 の デー タ が 使わ れる こと も あり ます 。 これ は XML デー タ で 


は 通信 を 行う 際 に デー タ 量 が 多く な り 処理 速 度 が 低下 し て し まう た め 、 軽 量 で 手軽 な JSON 形式 が 使わ れ 
る よう に な っ て き て いま す 。 また 、 標 準 の 非同期 通信 を 行う オブ ジェ クト は セキ ュ リ ティ の 都合 上 、 同 一 ド メ イ 
ン 上 の サー バー し か が 通信 が で きま せん 。 し か し 、JSON 形 式 を 利用 する こと で 、 そ の よう な 制約 を 超え て 他 
の サー バー か ら デ ー タ を 受け 取る こと が で きま す 。 これ に より 、 さ ら に 利用 範囲 が 広がっ て いま す 。 
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JaVvaoSCTrIDt の 
基本 事項 に つい て 














建造 詳 障 1dJOSBABT' 目 10 -3 ヨ 14YHO 





2 


還 詞 め め )) JavaScript の プロ グラ ムコ ー ド の 記述 方 法 
JavaScript プ ログ ラム の コー ド を 記述 する に は 、 い くつ か の 方 法 が あり ます 。 


了 y HTML/XHTML フ ァイル 内 に 記述 する 場合 

HTML/XHTML フ ァイル 内 に 記述 する 場合 は 、 文 書 内 に プロ グラ ムコ ー ド を 書き ます 。 基本 的 に は 、 次 の よ 
うに <script> 一 </script> タ グ 内 に 記述 し ます 。 HTML の 場合 は 、<script> タ グ に 対応 し て いな い ブ ラウ ザ で 
プロ グラ ム が 表示 され な いよ うに HTML の コメ ント 「<!--」 と 「//-->」 で 囲み ます 。 XHTML の 場合 は 、 本 来 は 別 
ファ イル に する の が よい の で す が 、 ど うし て も 駄目 な 場合 は 「//<![CDATA と 「//]]>」 で 囲み ます 。 <script> 
タグ は 、 特 に <head> タ グ 内 で な く <body> タ グ で 囲ま れ た 範囲 で も 問題 な く 記 述 で きま す 。 








く 8Cr1Dp 上 上 ypDe= " ヒ ex 上 / aaSC エ 1p 七 "> 
に ta 
ここ に スク リプ ト を 書く 
ーー し 
く / 8C エ ュ 1p ヒ > 


く SCr1D ヒ 上 上 YDe=" 七 @x ヒ / ]a マ aSC エ 1p ヒ "> 
//<! [CDATA [ 
ここ に スク リプ ト を 書く 
40 に 
く / SC エ 1 や キテ > 


古い ブラ ウザ に も 対応 させ た い 場 合 に は 、 次 の よう に 「language」 属 性 も 指定 し ます 。 


< く 8C エ tp 1]anguage= " avVaSC エ 1p 上 " 上 ype= "上 ex 上 /]aVaSC エ 1p 上 "> 
に コー 
ここ に スク リプ ト を 書く 
全 コ ニ 
く / SC エ 1p ヒ > 


また 、HTML で デフ ォ ル ト の スク リプ ト 言 語 と し て JavaScript を 指定 する 場合 は 、 次 の <meta> タ グ を 指定 
し て お きま す 。 


<meta hh 上 上 わ ー-@Gqdu1 ユ = "Con 上 en ヒーSC エ 1p ヒ Type" Con ヒ Gn ヒ = " 七 G 文 モ 上 / ]a で ASC エ 1 や 上 "> 


匠 外部 ファ イル と し て 記述 する 場合 
外部 ファ イル と し て 使用 する 場合 は 、 純 粋 に スク リプ ト だ け を 記述 し た テキ スト ファ イル を 作成 し 、<script> 
タグ の 「src」 必 性 で ファ イル 名 を 指定 し ます 。 


< く SC エ 1Dp 上 Sro=" フ ァイル 名 . 8 "></ SC エ 1p ヒ > 


ファ イル 名 の 未 尾 (拡張 子 ) は 「.jS] に する 必要 が あり ます 。 「src」 属 性 に は 「.js]」 フ ァイル だ け で な く 、CGI の パ 
ス な ど を 記述 し 結果 を JavaScript コ ー ド で 返す こと も で きま す 。 また 、JSON 形 式 な ど 、 デ ー タ だ け を 取得 し 
た い 場 合 に も 利用 する こと が で きま す 。 


了 y タグ 内 に 記述 する 場合 
タグ 内 に 記述 する 場合 に は 、 イ ベン ト 名 を 記述 し 、「=」 の 後ろ に 実行 する プロ グラ ム を 指定 し ます 。 多く の 場 
合 、 関 数 を 呼び 出す よう に な っ て いま す が 、 通 常 の プロ グラ ムコ ー ド を その まま 記述 する こと が で きま す 。 


<a hrefF="#" onC11ok="a1er ( 'ok?! ) ">ー</a> 


「onClick」 や 「onMouseover」l な どの イベ ント 名 は 、 す べ て 大 文字 で 書い て も 小文字 で 書い て も 動作 する た 
め 、 大 文字 小文字 が 混在 し て いて も 問題 あり ませ ん 。 た だ し 、 プ ログ ラム で 定義 する 場合 に は すべ て 小文字 に 
する 必要 が ある の で 、 注 意 し て くだ さい 。 

また 、 タ グ 内 に 直接 プロ グラ ムコ ー ド を 書く の は 、 好 まし い 状 態 で は あり ませ ん 。 本 書 の サン プル の よう に 
HTML 文 書 と JavaScript コ ー ド の ファ イル を 分 離す る よう に し て くだ さい 。 


画題 あめ >) 行 の 記述 

] 行 の 区 切り は 、「:」 (セミコロン) で す 。 命令 の 途中 で 改行 する こと も 可能 で す が 、 こ の 場合 ブラ ウザ 側が 自動 
的 に 行末 か どう か を 判別 し 処理 し ます 。 スク リプ ト 解 釈 エ ンジ ン と HTML 解 釈 エ ンジ ン の 都合 に より スク リプ ト 
内 に </script> の 文字 が ある と 、 以 後に 続く プロ グラ ム が 表示 され て し まう こと が あり ます 。 この よう な 場合 に 
は 、「"<+"/soript>"] の よう に 文字 列 と し て 分 割 / 結 合 し て 対処 する こと が で きま す 。 

また 、 命 令 に エラ ー な ど は 実行 時 に チェ ッ ク さ れ ま す 。 
国 証 >)) JavaScript で 扱え る 数 値 

数 値 は 10 進 数 、8 進 数 、 1 6 進数 を 扱う こと が で きま す 。 8 進数 は 先頭 が 「0」 で 始ま り 、 1 6 進数 は 先頭 が 「0x」 
で 始ま り ま す 。 小数 を 表す 場合 は 「.」 (ピリ オド) を 使い ます 。 負数 は 先頭 に 「-」( マ イナ ス ) を 付加 し ます 。 た と え 
ば 、10 進 数 で は 「4649」「-2.718」、1 6 進数 で は 「Oxfda5」「0x9AB4」、8 進 数 で は 「0 1 1」 な ど に な り ま す 。 

また 、 大 きい 数 値 や 小さ い 数 値 の 場合 は 、「e」 ま た は 「E」 を 使っ て 記述 する こと も で きま す ( 指 数 の 意味 の E)。 
た と えば 、「-3.1E12」「.1e12」「2E- 12」 の よう に な り ま す 。 
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画 丁 際 >>) 文字 列 の 扱い 

文字 / 文 字 列 は 、「"]( ダ ブル クォーテーション ) か 「」( シ ング ルク ォ ー テ ーション ) で 囲み ます 。 た と えば 、「 "皆既 
日 食 "]「'2035 年 ] の よう に 記述 し ます 。 「"」 で 囲ま れ た 文字 列 内 に 「"」 を 含め る 場合 は 「\"」、「'」 で 囲ま れ た 文 
字 列 に 「'」 を 含め る 場合 は 「\」」 と 指定 し ます 。 た と えば 、「" ダ ンク ー カ \"」「alert(\ 書 いて や る ぜ \)」 の よう に 
記述 し ます 。 「\」 は 使用 する 書体 に よっ て は 「 ヽ 」( バ ックス ラッ シュ ) に な り ま す 。 

ユニ コー ド 文 字 の 指定 (中 国語 や アラ ビア 文字 な ど を 混在 させ る 場合 ) は 、「\u 文 字 列 ] の よう に 「\u] を 指定 
し ます 。 














還 還 め )) 特殊 文字 

JavaScript で 用 意 さ れ て いる 特殊 な 文字 に は 、 次 の 文字 が あり ます (ここ で は 「\」 記 号 に な っ て いま す が 、 
使用 する 機種 ヒ と フ ォ ン ト に よっ て 「[ ヽ .」( バ ックス ラッ シュ ) に な る )。 これ ら の 特殊 文字 の 中 に は 、 期 待 通り に 動作 
し な い 「\b」「\t] な ど が あり ます 。 「\n]」 は アラ ー ト ダイ アロ グ に 表示 する 文字 列 を 改行 表示 する 場合 に 便利 で 
す ( 例 :[「alert("Sample\nTest')」。 


人 
バ な ス 




















シン グル クオ ー テ ーション 
8 進数 で 指定 


\xNN 16 進 数 で 指定 
\uNNNN ユニ コー ド で 指定 





\ 記 号 
ダブ ルク オー テー ショ ン 
\NNN 








国 是 >) リテラ ル 

リテラ ル と は 、 定 数 値 で す 。 「true」「false」 や 文字 列 で ある 「"MZ-80K2E"」、 数 値 の 「 153.4」 な ど が 該当 し 
ます 。 「true」 は 数 値 の 「0」 以 外 、「false」 は 数 値 の 「0」 で 代用 する こと も 可能 で す が 、 な る べく 「true」「false」 
を 使用 すべ き で す 。 
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@1@ 選 人 演算 子 に つい て 


CHAPTER-01 p 003 








国語)) JavaScript で 使え る 演算 子 


JavaScript に は 基本 的 な 演算 子 の み 用 意 さ れ 
て お ら り 、 高 度 な 演算 を 行う 場合 は TMath]」 オ ブ ジ ェ ク 
ト を 利用 する よう に な っ て いま す 。 JavaScoript で 
使用 で きる 演算 子 は 、 右 表 の よう に な り ま す 。 シフ ト 
な どの ビッ ト 演 算 は 、32 ビ ッ ト 長 で 処理 され ます 。 


男 証 > 代入 演算 子 














除算 





剰余 





プリ イン クリ メン ト 


y=++x( 代 入 前 に 加算 ) 





ポス トイ ンク リ メ ン ト 


y = x++( 代 入 後に 加算 ) 





プリ デ ク リ メン ト 


y=ー-x( 代 入 前 に 減算 ) 





ポス ト デ ク リ メ ン ト 


yー メ ーー (代入 後に 減算 ) 





符号 反転 


=ーX 





15&9 





論理 積 ( 論 理 式 ) 


(x == 12) && (y == 4) 





論理 和 


1519 





論理 和 ( 論 理 式 ) 


(x == 12) | (x ==9) 








排他 的 論理 和 





15'^9 





否定 


!(x == 12) 





符号 付き 左 シ フト 


9<<2 





符号 付き 右 シ フト 


9>>2 





符号 な し 右 シ フト 





19>>>2 


JavaScript に は 、 代 入 演算 子 も 用 意 さ れ て いま す 。 使用 で きる 代入 演算 子 は 、 下 表 の よう に な り ま す 。 


「=」 を 使っ た 記述 








X=X+Y 





X=XーY 





X= ニ X※ ネ Y 





X=X/y 





X=X96y 





X= ニ X<<y 





x= ニ X>>Y 





X ニ メッ >>> Y 





X= ニ X&y 





XX テニ X^y 








x=xly 
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男 本 >>> 三 項 演算 子 


JavaSoript に は 、 条 件 に より どちら か 1 つの 値 を 取る 三 項 演算 子 も 用 意 さ れ て いま す 。 三 項 演算 子 は 「?」 と 
「:」( コ ロン ) で 区 切っ て 指定 し ます 。 た と えば 、 変 数 「b] の 値 に 応じ て 代入 する 文字 列 を 変え る に は 、 次 の よう に 
記述 し ます 。 


a = (b > 2) ? "2 以上 " : "2 未満 " 
条件 を 満た し た 場合 に は 「?」 直 後 の 値 が 代入 され 、 条 件 を 満た し て いな い 場 合 に は 「:] よ り 後 ろ の 値 が 代入 
され ます 。 


還 還 >>) 演算 子 の 優先 順位 


演算 子 に は 、 優 先 順位 が 決め られ て いま す 。 優先 順位 は 、 下 表 の よう に な り ま す 。 表 の 上 に ある 演算 子 が 優先 
順位 が 高く な り 、 下 に 行く に 従っ て 優先 順位 が 低く な り ま す 。 


演算 子 





括弧 

符号 反転 、 デ クリ メン ト 、 イ ンク リ メ ン ト 
乗除 算 

加減 算 




















等 価 、 不 等 価 

ビッ ト 演算 / 論 理生 

ビッ ト 演 算 / 排 他 的 論理 和 
ビッ ト 演 算 / 論 理 和 





























キー ーー キー / 三 94 一 << ニ 
>>= ニ >>>= ニ &= ニ ^= ニ 








sEcTIoN | 調 


@I@ 邦 変数 に つい て 





国 証 め )) JavaScript で の 変数 の 定義 


JavaScript で の 変数 名 は 、 最 初 が 英文 字 で 始ま る 必要 が あり ます (など 一 部 例外 は ある ) 。 文字 目 以降 
で は 、 英 数 字 お よび アン ダー バー を 使用 する こと が で きま す 。 変数 名 は 大 文字 小文字 が 区 別 さ れ ま す 。 つま り 、 
「abc」 と 「Abc」 は 、 別 の 変数 と し て みな され ます 。 また 、Firefox な ど 一 部 の ブラ ウザ を 除き 、 変 数 名 に 日 本 語 
は 使え ませ ん 。 

JavaScript の 変数 は 宣言 する こと な く 、 い き な り 利用 する こと が で きま す 。 また 、Java な ど 他 言語 と 異な り 、 
どん な デー タ ( 数 値 や 文字 列 、 関 数 、 オ ブ ジ ェクト ) で も 入れ る こと が で きま す 。 つま り 変 数 の 型 を 問い ませ ん 。 
た と えば 、「a = 12.3] と 変数 a に 数 値 の 12.3 を 入れ た 後 で 、「a = "OK"] と いき な けり 文字 列 を 入れ て も 問題 あ 
り ま せん 。 また 、「a = document] の よう に オブ ジェ クト や メソ ッ ド 、 プ ロ パ ティ も 入れ る こと が で きま す 。 

型 を 問わ な い の で 、 次 の よう に 関数 を 入れ る こと も で きま す 。 








a = function( ) { al1ert("OK"): } 


この よう に JavaScript の 変数 は 、 非 常に 柔軟 な 仕様 と な っ て いま す 。 

変数 に 数 値 や 文字 列 を 代入 し た 場合 は その も の が 変数 に 入り ます が 、 オ ブ ジ ェクト な ど を 指し 示す 場合 に は 
注意 が 必要 で す 。 オブ ジェ クト へ の 参照 を 代入 する だ け で オブ ジェ クト その も の が コピ ー さ れ 、 新 た に 変数 に 入 
る わけ で は な いか ら で す 。 た と えば 、 次 の サン プル で は 変数 「a] に ペー ジ 全 体 の スタ イル シー ト オ ブ ジェ クト へ 
の 参照 を 代入 し て いま す 。 その 後 、 変 数 「b」 に 変数 「a] を 代入 し て いま す が 、 こ の 場合 は ペー ジ 全 体 の スタ イル 
シー ト オ ブ ジェ クト が 複製 され 、 変 数 「D] に 代入 され る わけ で は あり ませ ん 。 単純 に オブ ジェ クト へ の 参照 だ けが 
変数 「[b] に 入り ます 。 この た め 、 次 の サン プル を 実行 する と 、 ペ ー ジ 全体 の 背景 色 が 赤色 に な り ま す 。 「b = ga] 
は 「b = document.body.style」 と 等 価 に な る と いう こと で す 。 





a = document . body . S 上 y1e: 
わ = az: 
ゎ .backgroundCo1or = "red": 


ブラ ウザ に 実装 され て いる JavaScript で は 、 単 純 に 変数 を 作成 する と 「window」 オ ブ ジ ェクト の プロ パテ ィ 
と し て 追加 され ま す 。 つま り グ ロー バル 変数 と いう 名 目 に な っ て いま す が 、 実 際 に は 「window」 オ ブ ジ ェクト の 
プロ パテ ィ と し て 割り 当て られ ます (「for.…in] で 「window」 オ ブ ジ ェクト の 中 身 を 確認 する と わか る )。 この た め 、 
「window」 オ ブ ジ ェクト の プロ パテ ィ 名 と 変数 名 が 重複 し て こし まう と 、 正 常に 動作 し な く な り ま す 。 次 の サン プル 
を 実行 する と 、 変 数 「a]」 の 内 容 も 「window」 オ ブ ジ ェクト の 「a] プ ロ パ ティ の 内 容 も 同じ 文字 が 表示 され ます 。 





a = "OK": 
a1er (a) : 
a1er (window .a) : 


関数 名 も 同様 で 、「window」 オ ブ ジ ェクト 内 に 割り 当て られ ます 。 
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男 記 >)) グロ ー バ ル 変 数 と ロー カル 変数 

JavaScript で は 、 グ ロー バル 変数 と ロー カル 変数 が あり ます 。 グロ ー バ ル 変 数 は 上 記 の よう に 「window」 
オブ ジェ クト に 割り 当て られ ます が 、 関 数 内 で 「var」 宣 言 し た 場合 の み 、 ロ ー カ ル 変 数 と し て 定義 され ます 。 た と 
えば 、 次 の プロ グラ ム の 場合 、 ロ ー カ ル 変 数 と し て 扱わ れる の は 、 変 数 「d]」 の み で す 。 他 の 変数 [al」「b」「c」 は す 
べ て グロ ー バ ル 変 数 と し て 割り 当て られ ます 。 








な 三 12: 
ye お: テー 34 
Funoction tes() { 
C = 56: 
VaY dd = 78: 
} 


また 、 関 数 内 で var 宣 言 し た 変数 は 、 そ の 関数 内 の み 有 効 に な り ま す 。 た だ し 、 関 数 内 で あれ ば 、 ど こ で も 参照 
で き て し まう た め 、 注 意 が 必要 で す 。 た と えば 、 次 の サン プル の よう に 「for().」 な どの ルー プ ブ ロッ ク 内 で 「var] 
宣言 を 行っ て も ブロ ッ ク 外 で 変数 を 参照 する こと が で き て し まい ます 。 


(Eunction ( ) { 
For (Var =0: 1 ユ <10: エエ ++) : 
a1er (1) : 


}) () : 


Firefox ら で 実 装 さ れ て いる JavaScript 1.7 で は 「let」 を 利用 する こと で ブロ ッ ク 内 の み 有 効 な 変数 と し て 
扱う こと が で きま す が 、 他 の ブラ ウザ で は 利用 で き な い の で 、 ど うし て も ルー プ 外 に 変数 を 参照 させ た く な い 場 
合 に は 「(function() | 一 |) 0 」 と し て 関数 内 に 記述 する 必要 が あり ます 。 ライ ブラ リ を 制作 する 場合 や 、 よ り 安 
全 に コー ド を 記述 し た い 場 合 に は 有効 で す 。 





還 還 >>。 変数 の 削除 

定義 し た 変数 を 削除 する に は 、「delete」 を 使い ます 。 た だ し 、「var] 宣言 を し た 変数 は 削除 で き な い の で 注 
意 が 必要 で す 。 また 、 関 数 は 、 変 数 に 入れ た 場合 は 削除 する こと が で きま す が 、 そ う で な い 場 合 に は 削除 する こ 
と が で きま せん 。 た と えば 、 次 の サン プル で は 変数 「c」 に 定義 ご され た 関数 は 削除 ぐれ ます が 、 関 数 「d] は 
「delete」 を 使っ て も 削除 する こと は で きま せん 。 


C = fumotion (){ al1erE 上 ("OK"): } 
delete で C: 

Function d(){ alert("NG"): } 
de1ete d: 

97 


な お 、 変 数 で な く 定 数 と し て 定義 むせ る に は 、「const」 を 使い ます 。 た だ し 、 利 用 で きる ブラ ウザ が Firefox な ど 
限定 され ます 。 
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0W!0 店 | 配列 変数 / 連 想 配 列 に つい て 











男 証 >) 配列 変数 / 連 想 配列 と は 

JavaScript で は 、 配 列 変数 お よび 連想 配列 (/\ ッ シュ ) を 利用 する こと が で きま す 。 配列 変数 は 複数 の 値 を 
同時 に 格納 する こと が で きる 変数 で 、 参 照 する 位置 (添え 字 ) を 指定 し て 値 を 呼び 出し ます 。 連想 配列 は 配列 変 
数 と 同様 に 複数 の 値 を 同時 に 格納 する こと が で きる 変数 で す 。 通常 の 配列 変数 で は 添え 字 に 数 値 を 利用 し ま 
す が 、 連 想 配列 で は 添え 字 に 文字 列 を 使う こと が で きま す 。 配列 変数 と 連想 配列 は 、JavaScript で は オブ ジェ 
クト と し て 負 理 され ます 。 


還 還 了 )) 配列 変数 の 利用 方 法 


配列 変数 を 作成 する に は 、「Array」 オ ブ ジ ェクト を 生成 する こと で 行い ます 。 た と えば 、 配 列 変数 「a」 を 作成 
する 場合 に は 、 次 の よう に 記述 し ます 。 


a = new Array ( ) : 


この と き に 「Array()」 の パラ メー タ に 1 つ だ け 数 値 を 指定 する と 、 指 定 し た 数 の 配列 変数 が 作成 され ます 。 
た だ 、JavaScript で は 状況 に 応じ て 自動 的 に 配列 変数 の サイ ズ が 調整 され る の で 特に 指定 し な く て も 問題 あ 
り ま せん 。 サイ ズ を 指定 し た 場合 で も 、 状 況 に よっ て 自動 的 に サイ ズ は 調整 され ます 。 
「Array ())」 の パラ メー タ が 複数 ある 場合 に は 、 配 列 の 最初 か ら 順 番 に 値 が 入り ます 。 た と えば 、 次 の よう に 記述 
する と 、 配 列 要素 は 、 1 番目 が 数 字 の 「1」、2 番 目 が 数 字 の 「2」、3 番 目 が 文字 列 の 「OK」、4 番 目 に は 文字 列 の 
「NG」 が 入り ます 。 


a = new Array(1, 2, "OK", "NG" ) : 


「new Array()」 と 記述 する の が 面倒 な 場合 に は 、 日 を 使う} こと も で きま す 。 次 の サン プル は 、 上 記 サ ンプ ル 
と 同じ 結果 に な り ま す 。 


(っ 引 る PORT NGTH : 


JavaScript の 配列 は 、 変 数 同様 に 数 値 で も 文字 列 で も オブ ジェ クト で も 関数 で も 何で も 入れ る こと が で き 
ます (31 ペ ー ジ の コラ ム 参 照 )。 

配列 の 内 容 を 参照 設定 する に は 、[] を 使っ て 参照 する 位置 (添字 ) を 指定 し ます 。 た と えば 、1 番目 の 配列 の 
内 容 を 読み 出す に は 、 次 の よう に 記述 し ます 。 


直上 人 wOKP , "NG" ] : 
a[0]: 


a 
1o】 


上 
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変数 「b] に は 、 配 列 変数 「a] の 1 番目 の 内 容 が 代入 され ます 。 と 番目 の 内 容 を 読み 出す に は 、「a[1]] と な り ま 
す 。 配列 要素 の 番号 は 、「0」 か ら 始ま る 点 に 注意 し て くだ さい 。 内 容 を 読み 出す の で は な く 、 書 き 換 える 場合 も 
同様 に 指定 し ます 。 次 の サン プル は 、 配 列 要 素 の 3 番目 に 「 ら 15」 の 数 値 を 入れ ます 。 


a[2] = 215: 


また 、 配 列 要素 の 総数 は 、「length] プ ロ パ ティ で 求め る こと が で きま す 。 た と えば 、 次 の サン プル で は 、 配 列 
変数 「a] の 要素 の 総数 で ある 「4」 が 表示 され ます 。 


8a = 四 酸 と bei 上 NGT] : 
a1erE(a.1ength) : 


配列 内 に 配列 を 入れ る こと で 、 二 次 元 配列 や 多 次 元 配列 を 実現 する こと も で きま す 。 た と えば 、 次 の よう に 
設定 / 参 照 す る こと が で きま す 。 


[["A"/"B"],/["C" "DD"],/["E"/ "E"]]: 
a[2] [0]: 


a 
ゎ 
この 場合 、 変 数 Tb] に は 「E」 の 文字 が 入り ます 。 


還 記 了 >)) 連想 配列 の 利用 方 法 
連想 配列 (/ い ッシュ) は 、 設 定時 に は 「 時 」 を 使い ます 。 連想 配列 を 定義 むす る に は 、 次 の よう に 記述 し ます 。 
a = { year:1969, name: "KEF" } 
連想 配列 で は キー と 値 の ペア を 「.」 (カンマ) で 区 切っ て 列記 し ます 。 連想 配列 の 値 に は 、 変 数 同様 に 数 値 で 


も 文字 列 で も オブ ジェ クト で も 関数 で も 何で も 指定 する こと が で きま す (3 1 ペー ジ の コラ ム 参 照 )。 上 記 の 連 
想 配列 の 設定 は 、 次 の よう に 記述 する こと も で きま す 。 





a = new Objec ( ) : 
a .YGa エ 1969: 
a .name の 人 放 - 


連想 配列 へ の アク セス は 配列 変数 と 同様 に 「[]」 を 使い ます 。 先ほど の 例 で キー が 「year」 の 内 容 を 読み 出す 
に は 、 次 の よう に し ます 。 


D = a[ "year エ "] 


読み 出す キー が わか っ て いる 場合 に は よい の で す が 、 そ う で な い 場 合 に は 「for.…in]」 ま た は 「in」 を 利用 し ます 。 
すべ て の キー の 値 を 読み 出す に は 、 次 の よう に な り ま す 。 


a = { year : 1969, name : "KE" }: 
For (key in a){ 

a1er (a [key] ) : 
} 


この サン プル で は 、 変 数 [key」 に キー が 入り ます 。 この キー に 対応 し た 値 を 読み 出す に は 、「a[key]] と し ます 。 
すべ て の キー で は な く 、 特 定 の キー が 存在 する か どう か は 「if.……in] で 調べ ます 。 次 の サン ブル は 「year」 と い 
う キ ー が 存在 する 場合 に アラ ー ト ダイ アロ グ を 表示 し ます 。 





全 ニニ {Ga : 1969. name : "RE すけ) 
ifF ("year" in a) a1er モ ("プロパ ティ は 存在 し て いま す " ) : 


男 還 >) 連想 配列 と オブ ジェ クト の 関係 


JavaScript で は オブ ジェ クト の プロ パテ ィ 名 と 内 容 は 、 そ の まま 連想 配列 の キー と 値 に な っ て いま す 。 つま 
り 連 想 配列 を 作成 すれ ば 、 そ れ は オブ ジェ クト の プロ パテ ィ / メ ソ ッ ド を 定義 し ん た の と 同じ こと に な り ま す 。 逆 に 
オブ ジェ クト を 生成 し た 場合 に は 、 オ ブ ジ ェクト の プロ パテ ィ や メソ ッ ド は 連想 配列 と し て 参照 する こと が で きる 
わけ で す 。 JavaScript で 多く 利用 され る 入力 フォ ー ム の 「forms」「elements」 な ど は 参照 番号 と 連想 配列 の 
キー を 対応 させ て あり ます 。 この た め 、HTML 文 書 の 最初 の 「<form name="eForm 1 >」 に アク セス する に 
は 、「document.forms [0]」 で も 「document.forms ['eForm 1 "]」 で も 可能 に な り ま す 。 た だ し 、 ご く 一 部 の 
オブ ジェ クト に 限ら れ て いて 、 す べ て の 連想 配列 が こう な っ て いる わけ で は あり ませ ん 。 これ は 過去 と の 互換 性 
の た め 、 こ の よう に な っ て いま す (DOM Level 0 互換 の た め )。 


(WiilW 本 列 変 数 連想 配列 内 に 関数 を 設定 する 際 の 注意 点 


Safari で は 、 配 列 変数 内 に 関数 を 設定 する 際 に 関数 名 を 指定 する と エラ ー に な り ま す 。 た と えば 、 次 の 
サン プル で 上 の 行 は Safari で 正しく 処理 され ます が 、 下 の 行 は 文法 エラ ー に な り ま す 。 他 の ブラ ウザ で は 
エラ ー な く 処 理 さ れ ま す 。 た だ し 、 下 の 行 で は 関数 名 に 「b」 を 指定 し て いま す が 、 エ ラー な く 処 理 さ れ て も 、 
実際 に は 「b] と いう 名 前 の 関数 は 定義 され ず 、 無 名 関数 / 匿 名 関数 扱い に な り ま す 。 


[Eunction (){ }]: 
[Eunction b(){ }]: 


⑮Safari で エラ ー に な っ て いる 画面 


SyntaxError - Parse error 
fle///IDE200C8/DATA/CENKOUJJSWE3XS3XS6WXE3XS2XAPXE3XS3X85XE3X51% き 83NE3%82XAFXE39WGSXDSX 
32829XAE3Y83WS3%E38ZNKAF/PDT/1XE7XAENAOYXESNEFKSDXESXSAXAOXEG96XS7NEZwABKAO/ 
sample/maln.is 
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@I@7】 交 数 の 型 に つい て 
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還 証 M め ) JavaSript で の 変数 の 型 

JavaScript の 変数 に は 、 ど ん な も の で も 入れ る こと が で きま す 。 つま 変数 に 入れ る デー タ の 型 を 問わ な 
いこ と に な り ま す 。 変数 の 型 を 問わ な い の は 非常 に 便利 な 反面 、 思 わ ぬ 結果 を 引き 起こ すこ と が あり ます 。 

型 の 不一致 に に よる エラ ー や 思わ め ぬ 結 果 を 防ぐ た め に 、 あ ら か じ め 変 数 の 型 を 調べ て か ら 処 理 する 方 が 安全 
な こと が あり ます 。 JavaScript で 変数 の 型 を 調べ る に は 「typeof(」 を 使い ます 。 パラ メー タ に 調べ た い 変 数 
名 な ど を 指定 し ます 。 返さ れる 方 の 種類 は 、 下 表 の よう に な り ま す 。 「undefined」 は 「undefined」、「nulll は 
「object」 に な る 点 に 注意 し て くだ さい 。 

number 
string 














function 
object オブ ジェ クト null 
undefined 未定 義 デ ー タ undefined 


真 偽 値 ( ブ ー リ アン ) 











JavaScript で 型 が 不一致 の 場合 に は 、 自 動 的 に 適切 な 型 に 変換 され 処理 が 行わ れ ま す 。 た と えば 、「12 + 
"34"」 は 数 値 の 「12」 が 文字 列 に 変換 され 、「1234」 と いう 文字 列 に な り ま す 。 


男 是 >) 型 変換 を 行う 方 法 

JavaSoript で 型 変換 を 行う 場合 に は 、 状 況 に 応じ て いく つか の 方 法 が あり ます 。 
数 値 か ら 文字 列 

数 値 か ら 文 字 列 に 変換 する 場合 は 、 次 の よう に な り ま す 。 


"m+ 数 値 「!+ 数 値 new Strinmg (数 値 ) 


た と えば 、「myVar = "+123」「myVar = " + 153」 の よう に 記述 し ます 。 


文字 列 か ら 数 値 ( 文 字 列 は 数 値 / ァ 数式 で ある こと ) 
文字 列 か ら 数 値 に 変換 する 場合 は 、 次 の よう に な り ま す 。 


parseF1oa (文字 列 ) parseTn (文字 列 ) 
eva1 (数 式 を 含む 文字 列 ) new Number (文字 列 ) 


た と えば 、「myVar = parseFloat("1965.215")」「myVar = parselnt(2.15)」「myVar = eval 
(“123+456+Math.PI")」 の よう に 記述 し ます 。 
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@1@ 用 条件 分 岐 に つい て 





還 証 >) if の 基本 


JavaScript に は 、 一 般 的 な プロ グラ ミン グ 言 語 同様 の 条件 分 岐 命令 が 用 意 さ れ て いま す 。 も っ と も 基本 的 
な 命令 は [if 命令 で す 。 た と えば 、 変 数 「a」 の 値 が 1 つか どう か を 調べ 、 値 が 1 ら の 場合 に アラ ー ト ダイ アロ グ を 
表示 する 場合 に は 、 次 の よう に 記述 し ます 。 


1 (a == 12) aler モ ( "12 です ") 


「a == 12」] で な く 、 間 違っ て 「a = 12」 と する と 、 変 数 「a」 に 数 値 の 1 2 が 代入 され て し まう の で 注意 し て くだ 
さい 。 [if 命令 で 指定 で きる 比較 演算 子 は 、 下 表 の よう に な り ま す 。 比較 され る 対象 の 型 が 異な る 場合 に は 、 
動 的 に 適切 な 型 に 変換 され て か ら 比 較 が 行わ れ ま す 。 


比較 演算 子 


式 が 等 し い 
式 が 等 し く 型 も 等 し い 


























に 式 が 等 し く な い 
> 左 が 大 きい 
>= 左 が 等 し いか 大 きい 


| 右 が 大 きい 
右 が 等 し いか 大 きい 











還 還 了 >>) 複雑 な 条件 の 指定 


複数 の 条件 を 満た し た 場合 に 処理 する に は 、「&S」 を 使い ます 。 た と えば 、 変 数 「a] の 値 が 1 2 で 、 変 数 b の 値 
が 34 の 場合 に アラ ー ト ダイ アロ グ を 表示 する に は 、 次 の よう に 記述 し ます 。 


a 和 及 ? 
ゎ 34: 
も 人 ( (a == 12)-&& (も == 34) ) alert ("12 と 34 で す ") : 


どちら か 一 方 の 条件 を 満た し た 場合 に 処理 する に は 、「 | 」 を 使い ます 。 た と えば 、 変 数 「a」 の 値 が 1 つか 34 
の 場合 に アラ ー ト ダイ アロ グ を 表示 する に は 、 次 の よう に 記述 し ます 。 


柚 呈 - 人 流 3 
下 。(.(a: ==: 12)。 人 (a == 34)) ae も ("2 か 34 で す "): 
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「SS」 と 「 || 」 を 複数 使っ て より 複雑 な 条件 も 指定 する こと が で きま す 。 また 、 最 近 で は 「 || 」 は 次 の よう に 使 
われ る こと も あり ます (本 書 で も 一 部 使用 し て いま す ) 。 


a = (b | 12): 


これ は 変数 また は オブ ジェ クト 「b」 が 未定 義 の 場合 に は 変数 「a] に 1 ら 5 を 入れ る と いう 内 容 に な り ま す 。 す で 
に 、 オ ブ ジ ェクト と し て 存在 し て いる 場合 に は 初期 化し な いと いっ た 場合 に 利用 する こと が で きま す 。 


還 還 >) 比較 演算 子 を 省略 し た 記述 
if 命令 で は 、 比 較 演 算 子 が 省略 され て 記述 べ れ て いる こと が あり ます 。 た と えば 、 次 の よう な 記述 で す 。 
fF (a) a1er ( "a は 存在 し て いま す " ) : 





これ は 変数 また は オブ ジェ クト 「a」 が 「undefined」 ま た は 「null」、「false] で な い 場 合 ( つ まり 真 ) に 条件 を 満 
た し た こと に な り 、 以 後 の 命令 が 実行 され ます 。 これ と は 逆 に 、 変 数 また は オブ ジェ クト 「a」 が 「undefined]」 ま た 
は 「null」、「false」 の 場合 に 処理 する に は 、 否 定 演算 子 で ある 「 員 を 先頭 に 付け て 記述 し ます 。 


if (!a) a1ert ( "a は 存在 し て いま せん " ) : 


還 証 め )) 条件 を 満た し た と き に 複数 の 命令 を 実行 する 記述 
[if 命令 で 条件 を 満た し た と き に 実行 する 命令 が 複数 ある 場合 に は 、 ブ ロッ ク を 示す 「 人 | と 「| 」 で 実行 する 命 
令 を 囲み ます 。 た と えば 、 次 の よう に 記述 し ます 。 
ま 下 ma ニー コ 142). 
わ = 34: 
a1er ( "a は 12 で す " ) : 
} 





条件 を 満た し た 場合 、 変 数 「D] に 34 の 値 が 入り 、 ア ラー ト ダ イア ログ が 表示 され ます 。 


還 還 >) 条件 を 満た し た 場合 と そう で な い 場 合 に 処理 を 分 ける 方 法 


条件 を 満た し た 場合 と そう で な い 場 合 を 分 ける に は 「else」 を 使い 、 次 の よう に 記述 し ます 。 条件 を 満た さ な 
か っ た 場合 の 処理 を 「else」 以 後に 記述 し ます 。 


if (a == 12) { 


3ー: 人 き 信 ぁ 

a1er モ ( "a は 12 で す " ) : 
})e1set 

や . = 56: 


a1er モ ( "a は 12 で は あり ませ ん " ) : 


還 証 >) [if 命令 の 入れ 子 に つい て 


「if] 命 令 は 次 の よう に 入れ 子 に する こと も で きま す が 、 読 み に く く な る 上 に ミス も 発生 し や すく な り ま す 。 あ 
まり に 条件 式 が 長い よう で あれ ば 考え 方 を 見 直す の が よい で し ょ う 。 





if (a == 12) { 
if (b == 34){ 
if (oc == 56){ 


} 


}) 


国 還 2) 「switch.…case」 の 使い 方 


1 つの 変数 の 値 に 応じ て 複数 の 処理 を 行い た い 場 合 に は 、「if 命 令 よ り も 「switch.…case」 の 方 が 適し て い 
ます 。 た と えば 、 プ ロン プ ト ダ イア ログ で 入力 され た 文字 列 に 応じ て 処理 を 振り 分 ける に は 、 次 の よう に 記述 し 
ます 。 な お 、case で 調べ る 文字 列 、 値 は 自動 的 に 型 変換 が 行わ れ な い の で 注意 が 必要 で す 。 


a = prompt( "英文 字 を 入れ て くだ さい " , "a") : 
Switch (a) { 
Ca8e "a" : al1er("a で す "): 


break: 
caSse " わ " : aer ("も で す " ) : 

break: 
名人 な 還 ら acegE@PEI( WOW 

break: 


defau1 モ : a1er ("abc 以外 で す " ) : 


S】ii 条件 式 を 短く する 記述 方 法 


JavaScript で は 「switch.…case」 や 「if] 命 令 を 列記 し な く て も 連想 配列 を うま く 利 用 する こと で 条件 
式 を 短く する こと が で きま す 。 た と えば 、 上 記 の 「switch.…case」 の サン プル は 、 次 の よう に 記述 する こと 


が で きま す 。 


Funo = { 
"a" : Eunction ( ) {al1ert ( "a で す " ) } , 
"b" : Eunction ( ) {alert ( "も で す " ) } , 
"C" : Function ( ) {talert ("Cc で す ") }, 

} ヵ 

St エ = prompt ( "英文 字 を 入れ て くだ さい " , "a") : 

if (funo[st エ ] ) 

下 QrGi[ き も (かぁ 

e1se 

a1er て ( "abc 以 外 で す " ) : 
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@ ぐ 0 上 繰り 返し 処理 に つい て 








思う 繰り 返し を 行う 命令 
JavaSoript に は 繰り 返し を 行う 命令 と し て 「forO」「while 0」「do.….while O」 が 用 意 さ れ て いま す 。 


還 語 了 >>。 一定 回 数 処理 を 繰り 返す 

「forO」 命 令 は 、C 言 語 な ど 他 の 言語 と 同じ よう に 記述 
し ます 。 「for()」 の パラ メー タ は 初期 値 、 終 了 条 件 、 増 減 
値 の 3 つ を 指定 し ます 。 た と えば 、0 か ら 9 ま で の 合計 を 
求め る に は 、 右 の よう に 記述 する こと が で きま す 。 また 、 初 期 値 、 終 了 条件 、 増 減 値 は 「.」( カ ンマ ) で 区 切っ て 複 
数 列記 する こと が で きま す 。 た と えば 、 下 の よう に 記述 する こと が で きま す 。 


人 王 記 ( 
介 Q2.( や 0 ま 生 0 PB ニ 5 や 1 


n = 0z 
m = 0: 
0 トー Ri は DR に っ と (> 185! 2 


この 場合 、[j」」 の 値 が 5 以上 に な っ た ら 終 了 す る の で 変数 [nm]」 の 値 は 6、「m] は 10 と な り ま す 。 
な お 、 初 期 値 、 終 了 時 条件 、 増 減 値 と も 省略 する こと が で きま す 。 た だ し 、 次 の よう に 全部 省略 する と 無限 に 
繰り 返し 処理 が 行わ れ て し まう の で 注意 し て くだ さい 。 


所 Oi 


この よう な 場合 に は 、 次 の よう に 「break」 を 使っ て 繰り 返し 処理 か ら 





= 0: 
抜け 出す こと が で きま す ( 直 近 の 繰り 返し か ら 抜 ける ) 。 また 、 ま m(jj)1 
「continue」 で 繰り 返し の 先頭 に 戻る こと が で きま す 。 ロ オ キ : 


ifF (n>10) break: 


還 還 >)) 条件 を 満た し て いる 間 は 繰り 返す 
「for0] 命 令 は 一 定 回 数 繰り 返す 場合 に 便利 で す が 、 条 件 を 満た し て いる 間 は 


結 り 返す に は [while ()」 ま た は 「do..while()」 を 使い ます 。 「while0」 の バラ メー 3 = 。: 

夕 に 条件 を 指定 し ます 。 (<10) ( 
「While () 」 の 場合 は 繰り 返し 処理 前 に 条件 が 判定 され る た め 、 一 度 も 繰り 返し すず 

処理 が 行わ れ な いこ と が あり ます 。 こ れ に 対し て 「do..while()」 で は 条件 は 最後 1 


に 判定 され る た め 、 最 低 で も 1 回 は 繰り 返し 処理 が 行わ れ ま す 。 記述 で きる 条件  } 
式 は 、「i 命 令 と 同じ で 複数 の 条件 式 を 組み 合わ せ て 指定 する こと が で きま す 。 
最初 に 説明 し た 「for() 命令 と 同じ 処理 を 「while O」 を 使っ て 記述 する と 、 右 の よう に な り ま す 。 
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WW 関数 の 定義 


還 証 >) 関数 の 定義 


JavaScript で 関数 を 定義 する に は 、「function]」 ま た は 「new FunctionO」 を 使っ て 行い ます 。 一 般 的 に は 、 
「function] を 使い ます 。 た と えば 、「abc」 と いう 名 前 の 関数 を 定義 する に は 、 次 の よう に 記述 し ます 。 








Funotion abc(){ } 


JavaSoript で は 、 変 数 に 関数 も 入れ る こと が で きる た め 、 次 の よう に 記述 し て も 同じ で す 。 


abc = function(){ } 


また 、 関 数 の 名 前 は 付け な く て も 動作 させ る こと が で きま す (無名 関数 匿名 関数 )。 た と えば 、 次 の よう に 
記述 する こと が で きま す 。 

( Eunction ( ) { a1ert("Ok"): }) () 

「function] で な く 「new Function()」 の 場合 に は パラ メー タ に 実行 する 関数 の 内 容 を 指定 し ます 。 た と え 
ば 、 次 の よう に 記述 する こと が で きま す 。 


tes 上 = new Funotion ("al1erE 上 ('ok') ") : 
tes キ ( ) : 


男 証 >>) 関数 名 を 指定 し た 場合 の 扱い 


[function」 で 単純 に 関数 名 を 指定 し た 場合 に は 、「window」 オ ブ ジ ェクト の メソ ッ ド と し て 定義 され ます 。 次 
の サン プル で は 、 ア ラー ト ダ イア ログ が ら と 回 表示 され ます 。 





Functon abc() { a1ert(123): } 
abo ( ) : 
window . abc ( ) : 


還 還 >)) 関数 を 定義 する 際 の 注意 点 

JavaScript で は 同じ 名 前 の 関数 が あれ ば 、 後 か ら 定 義 し た 方 が 有効 に な り ま す 。 また 、JavaSocript で は オ 
ブ ジ ェクト の ひか な 形 を 定義 する 場合 や メソ ッ ド の 定義 に も 「function」 を 使い ます (38 ペ ー ジ 参照 )。 その た め 、 
間違っ て すでに ある 「window」 オ ブ ジ ェクト の メソ ッ ド や プロ パテ ィ を 書き 換え な いよ うに 注意 し て くだ さい 。 
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SECTION | 上 議 
010 オフ シン ョ クト ド / ズ スソ ッ ド / ノ プロ リル ティ 
居 う いて 








国 症 際 》》》 オブ ジェ クト 


JavaSoript で 、 さ ま ざ ま な 処理 を 行う 際 に 利用 され る の が 「 オ ブ ジ ェクト 」 で す 。 JavaScript で は 、HTML 文 
書 も スタ イル シー ト も オブ ジェ クト と し て 扱わ れ ま す 。 ペー ジ 上 に 表示 され て いる も の は 、 す べ て オブ ジェ クト と 
考え て も 構い ませ ん 。 また 、 三 角 関 数 や 対数 な どの 計算 を 行う オブ ジェ クト や 文字 列 操作 を 行う オブ ジェ クト な 
ど 、 さ ま ざ ま な オブ ジェ クト が 用 意 さ れ て いま す 。 

オブ ジェ クト で も っ と も 基本 と な る の が 「Object」 オ ブ ジ ェクト で す 。 JavaScript で は 既存 の オブ ジェ クト を 
利用 する だ け で な く 、「Object」 を 使っ て 独自 に オブ ジェ クト を 定義 する こと が で きま す 。 た と えば 、 
「computer」 と いう 名 前 の オブ ジェ クト (コン スト ラク タ ) を 用 意 し 、 そ こ か ら さ ま ざ ま な オブ ジェ クト (イン スタ 
ンス ) を 生成 する に は 、 次 の よう に 記述 し ます 。 




















Funotion computer (machineName, Cpu) { 
this.name = maochineName: 
this .Cpu = CDU: 
this .memory = "1GB": 
} 
macBook1 = new computer ( "MacBook" , "Core2 Duo" ) : 


オブ ジェ クト を 生成 する に は 、「new」 を 使っ て 行い ます 。 上 記 で は 、「new」 を 使っ て 「macBook ] 」 と いう 名 
前 の オブ ジェ クト (イン スタ ンス ) が 生成 され ます 。 

「function」 は 関数 を 定義 する 命令 で す が 、JavaScript で は オブ ジェ クト の ひな 形 ( コ ンス トラ クタ ) を 定義 
する 場合 に も 使用 し ます 。 基本 的 に は 関数 の 定義 と 変わ り ま せん が 、 オ ブ ジ ェクト の プロ パテ ィ や メソ ッ ド を 定 
義 す る 場合 に は 、「this」 を 使っ て オブ ジェ クト 自身 を 示し ます 。 


購 謀 眼 G1dJOSBAB 目 10 41dYHO 


器 


還 本 陰 》》 プロ パテ ィ 


オブ ジェ クト の プロ パテ ィ は 「 オ ブ ジ ェクト 名 . プ ロ パ ティ 名 」 と し て 設定 / 参 照 する こと が で きま す 。 プロ パテ ィ 
の 定義 は 上 記 サ ンプ ル の よう に 「this. プ ロ パ ティ 名 」 と し て 行う こと が で きま す 。 








回 本 了 》》》 メソ ッ ド 
JavaScript で は 、 プ ロ パ ティ に 実行 する プロ グラ ムコ ー ド を 指定 し た の が 「 メ ソ ッ ド 」 と し て 処理 され ます 。 次 
の サン プル で は 「play」 メ ソ ッ ド を 定義 し 、 メ ソ ッ ド が 呼ば れ た ら ア ラー ト ダ イア ログ を 表示 し ます 。 





Funoction computer (machineName, cpu) { 
this .name = maohineName 
this .Cpu = CDU: 
this .memory = "1GB": 
this .p1ay = Funoion ( ) { a1er モ (Ehis .name+ "で 音楽 を 再生 し ます " ) : } の 


1 


} 
macBook1 = new compuer ( "MacBook" , "Core2 Duo" ) : 
macBook1 .p1ay( ) : 


国 丁 際 》》》 プロ パテ ィ / メ ソ ッ ド の 上 書き 

JavaScript で は 後 か ら プ ロ パ ティ / メ ソ ッ ド の 内 容 を 上 書き する こと で きる の で 、 基 本 と な る オブ ジェ クト を 
定義 し 、 状 況 に 応じ て 追加 し て いく こと が で きま す 。 これ は 自分 で 作成 し た オブ ジェ クト だ け で な く 、 既 存 の オブ 
ジェ クト で も 同様 で す 。 た と えば 、 文 字 列 の 先頭 に 文 マ ー ク を 付加 する メソ ッ ド を 追加 する プロ グラ ム は 次 の よ 
うに な り ま す 。 























String .prototype . Star = Function( ) { 
ェ return " 表 "+ 上 h18: 


) 


a1ert ("Samp1e" . Star() ) : 


実行 する と 「 娘 Sample」 と 表示 され ます 。 既存 の オブ ジェ クト に プロ パテ ィ や メソ ッ ド を 追加 する 場合 に は 
「prototype」 を 使っ て 行い ます 。 「 オ ブ ジ ェクト 名 .prototype. メ ソ ッ ド 名 = function() | 処理 }」 と し て 好き な 
だ け 機 能 を 追加 する こと が で きま す 。 JavaScript ラ イブ ラリ で も っ と も 多く 利用 され て いる prototype.jS ラ 
イブ ラリ は 、 こ の 機能 を 利用 し て さま ざま な メソ ッ ド を 既存 の オブ ジェ クト に 追加 し て JavaScript の 基本 機能 を 
強化 し て いま す 。 
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(WIWiil while で プロ パテ ィ な どの 状態 の 変化 を チェ ッ ク し な い 
JavaScript に は 条件 を 満た し て いる 間 に 処 理 を 行う 「while ()」(36 ペ ー ジ 参照 ) が あり ます が 、 プ ロ パ 

ティ の 変化 な ど を 「while ()」 で チェ ッ ク し て は いけ ませ ん 。 場合 に よっ て は ブラ ウザ が 停止 し こし まい ます 。 

定期 的 に 何 か が プロパ ティ な ど を 監視 し た り チ ェ ッ ク す る 場合 に は 、「while()」 で は な く 、「setTimeout()」 


(64 ペ ー ジ 参照 ) か 「setInterval()」(G6 ペ ー ジ 参照 ) を 使っ て 行う の が 安全 で す 。 
また 、 状 態 が 変化 し た と き に 発生 する イベ ント が 用 意 さ れ て いる の で あれ ば 、 そ の イベ ント に 対し て イベ 
ント ハン ドラ (処理 ) を 設定 し ます 。 











sECTION | 議 


⑯ 邊 較 上 イベ ント に つい て 
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還 証 M)) イベ ント の 概要 

JavaSoript で は 、 ユ ー ザ ー の 操作 や ブラ ウザ か ら の 応答 に よっ て さま ざま な イベ ント が 発生 し ます 。 この イ 
ベン ト は 、 ブ ラウ ザ に よっ て 実装 が 異な り ま す 。 つま り 、Internet Explorer で は 存在 する イベ ント が Firefox で 
は 存在 し な いと いっ た こと が あり ます 。 も ちろ ん 、 基 本 的 な イベ ント に 関し て は 、 ど の ブラ ウザ で も 捕捉 する こと 
が で きま す 。 

し か し 、 イ ベン ト を 扱う イベ ント オブ ジェ クト に 関し て は 、 ブ ラウ ザ に よっ て 対応 が 異な り ま す 。 大 きく 分 ける と 、 
Internet Explorer と Firefox な ど 標 準 仕様 に 治っ た ブラ ウザ に な り ま す 。 問題 な の は 、 こ れ ら の ブラ ウザ で 処 
理 も 命令 も プロ パテ ィ 名 さえ も 異な っ て お り 、 互 換 性 も 少な いと いう 点 で す 。 この た め 、 イ ベン ト 処 理 に 関し て 
は ブラ ウザ ご と 対処 し な けれ ば な ら な いこ と に な り ま す 。 な お 、 ら Safari や Opera の 場合 に は 、Internet 
Explorer 用 の プロ グラ ム で も Firefox 用 の プロ グラ ム で も 動作 する よう に な っ て いま す 。 








還 証 了 》) イベ ント の 記述 方 法 

イベ ント の 設定 方 法 も | 旧来 の 方 法 を 除く と 、Internet Explorer と Firefox な ど 標 準 仕様 に 治っ た ブラ ウザ で 
異な り ま す 。 旧来 の 方 法 で あめ われ ば 、 イ ベン ト ハ ンド ラ の 定義 に 関し て は どの ブラ ウザ で も 同じ よう に 扱う こと が 
で きま す 。 た と えば 、 旧 来 の 方 法 で <a> タ グ が クリ ッ ク さ れ た と き に アラ ー ト ダイ アロ グ を 表示 する に は 、 次 の よ 
うに 記述 し ます 。 

















<a hreF=" 失 " onC]1ick="a1er ("Ok' ) "> クリ ッ ク し て くだ さい </a> 


上 記 の 記述 方 法 は 、 古 い ブ ラウ ザ で も 新しい ブラ ウザ で も 確実 に 動作 し ます 。 どう し て も 、 動 作 保証 を 取ら な 
けれ ば な ら な い 場 合 に は 、 こ れ で も 構わ な いで し ょ う 。 

し か し 、 ら 007 年 現在 で は HTML 文 書 と スタ イル シー ト フ ァイル 、JavaScript コ ー ド は 分 離す る 方 向 で す 。 こ 
の 場合 次 の よう に <a> タ グ に ID 名 を 指定 し 、 ペ ー ジ が 読み 込ま れ た ら onclick イ ベン ト ハ ンド ラ を 設定 し ます 。 


Re の 7 当 目 用 用 


<a hreF="#" 1d="aLiink"> ク リッ ク し て くだ さい </a> 





ee 当 目 用 


window .on1oad = Funotion( ) { 
documenrt . getE1ementByTqd ( "aLink" ) .onc1ick = funotion ( ) { 
a1er モ ("ok") : 
} 





通常 は 、 こ の 方 法 で も 問題 あり ませ ん が 、 開 発 者 が 複数 人 に 渡る 場合 や ライ ブラ リ を 使用 し て いる 場合 に は 、 
不具 合 が 発生 する こと が あり ます 。 それ は 、「onclick」 な どの イベ ント ハン ドラ に 上 記 の よう に 処理 を 設定 する 
と 、 以 前 に 設定 され て いた 処理 が 上 書き され て し まい 、 実 行 さ れ な く な る た めで す 。 た と えば 、 次 の サン プル で 
は アラ ー ト ダイ アロ グ を ら 回 表示 する の を 期待 し こ て い ます が 、 最 後に 定義 され た 処理 し か 動作 し な いた め 、 ア 
ラー ト ダ イア ログ は 「ok」 を 表示 する だ け で す 。 


























w1ndow.on1oad = Funotion( ) { 
document . getE1emen モ ByTq ( "ahink" ) .onc1ick = fFunoction( ) { 
a1er ( "NG" ) : 
} 


documen . getE1emenEByTd ( "ahLink" ) .onc1icjkk = fFunction ( ) 【 
a1ert ("ok" ) : 
} 


サン プル で は 見 れ ば すぐ に わか り ま す が 、 イ ベン ト 設 定 部 分 が 離れ て いる 場合 に は 、 こ の よう な 不具 合 は 発見 
が 難し く な り ま す 。 そこ で 、 現 在 で は 、「addEventListener()」 を 使っ て 、 イ ベン ト を 上 書き する の で は な く 、 追 
加 す る よう に し ます 。 た だ 、「addEventListener()」 は Internet Explorer で は 使用 で き な い た め 、 代 わり と な 
る 「attachEvent()」 を 使っ て 行い ます 。 

上 記 サ ンプ ブル を 「addEventListener()」「attachEvent()」 を 使っ て 書き 換え る と 、 次 の よう に な り ま す 。 


SeWXa 事 geig 当 目 用 目 


<a hreF="#" 1d="aLink "> クリック し て くだ さい </a> 








ODE | 上 較 


w1ndow.on1oad = Funotion ( ) { 
1ink1 = document .getE1emenEtByTdq ( "aLink" ) : 
ifF (1ink1 .adqdEventListener) 1ink1 .addEventLii st 上 ener ("Cc1iok", @v 


プ 





の 19IY@ 玉 @ 


Funotion ( ) { al1er ( "NG" ) : ) , fa1se) : ペデ 
ifF (1ink1 .attachEvent) 1ink1 . attachEven ("onc1ick" , Funotion( ) { ゃ 
ム ま am も (NOTOz より ャ ビン 


ifF (1ink1 .aqdqdEventLiistEener) 1ink1 .adqdEventLii stener ( "c1iock" , re 

お GE を SN ら 6 も a 届 SPE( WGET ae) テ ーー  - ご デ ご こ ー 。 -〒 4 

1F (1ink1 .attachEvenE) 13ink1 .attachEvent ("onc1iok" , Funotion(){ き 。 
a1ert ("oOK" ) :])): 『 








上 記 の サン プル で は 、 リ ンク 文字 を クリ ッ ク す る と 、 ア ラー ト ダ イア ログ が ら 回 表示 され ます 。 な お 、 
「addEventListener)」「attachEvent()」 で 追加 し た イベ ント を 削除 する に は 、「removeEventListener()」 
「detachEvent()」 を 使い ます 。 パ ラメ ー タ に は 、 追 加 時 に 指定 し た パラ メー タ と 同じ パラ メー タ を 指定 し ます 。 
パラ メー タ が 異な る と 違う イベ ント と みな され 削除 され ませ ん 。 
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還 本 際 》》》> イベ ント オブ ジェ クト に つい て 

イベ ント が 発生 する と 、 イ ベン ト オ ブ ジェ クト に イベ ント が 発生 し た エレ メン ト や X/Y 座 標 値 な ど 各 種 情報 が 設 
定 さ れ ま す 。 た だ し 、 こ の イベ ント オブ ジェ クト の 扱い が ブラ ウザ に より 異な っ て いま す 。 

Internet Explorer で は 「event]」 オ ブ ジ ェクト に 情報 が 格納 され 、Firefox で は イベ ント 処理 を 行う 関数 (イベ 
ント ハン ドラ ) の パラ メー タ と し て 渡さ れ ま す 。 Safari つや Opera で は 、「event」 オ ブ ジ ェクト と 、 イ ベン ト 処 理 を 
行う 関数 (イベ ント ハン ドラ ) の パラ メー タ の 両方 に 情報 が 格納 され ます 。 次 の サン プル を 実行 する と 、「event」 
オブ ジェ クト に 格納 され た か 、 パ ラメ ー タ と し て 渡さ れ た か を 確認 する こと が で きま す 。 


EE 還 2 


<a hrefF="#" 1d="aTLiink"> ク リッ ク し て くだ さい </a> 





K@10I@ 事 9@) り ) 





CDE 1 上 


window.on1oad = fFunotion( ) { 
document . getE]emenEByTqd ( "aLink" ) .onc1ick = Funotion ( ev) { 
a1er (eV) : 
a1er (even ) : 
} 


の 19@ 表 @ 





} 


大 きく 分 ける と 、Internet Explorer と Firefox な ど 標 準 仕様 に 治っ た ブラ ウザ で 如 理 分 ける こと に な り ま す 。 
座標 値 の 取得 や エレ メン ト の 取得 な ども 異な っ て いる た め 、 イ ベン ト 処 理 に 関し て は ブラ ウザ 別に 対処 する 必 
要 が あり ます 。 

ブラ ウザ 別に イベ ント 処理 を 分 ける に は 以下 の よう に し ます 。 最初 に 関数 に イベ ント オブ ジェ クト が 渡さ れ た 
か どう か を 判別 する こと で internet Explorer だ け 処 理 を 分 ける 事 が で きま す 。 


Funotion evenEProo ( ev ) { 
ifF (!evt) { 
【 エ nternet Exp1ore て で の イベ ント 処理 】 
}e1se{t 
【DOM に 準拠 し た ブラ ウザ で の イベ ント 処理 】 
(Firefox, SafFari , Opera な ど ) 





sECTION | 開 


@ 邊 人 4 DOM に つい て 





男 還 2>) DOM の 概要 


JavaScript で は 、HTML 文 書 を オブ ジェ クト と し て 扱う こと が で きま す 。 これ は HTML の タグ や テキ スト や 
画像 な ど 、 ほ ば ぼ すべ て が オブ ジェ クト と し て 処 理 さ れ ま す 。 これ を DOM(Document Object Model/ ド キュ ユメ 
ント オブ ジェ クト モデ ル ) と いい 、HTML タ グ も オブ ジェ クト な の で プロ パテ ィ や メソ ッ ド に よっ て 操作 し た り 、 各 
種 処 理 を 行っ た りす る こと が で きま す 。 

HTML タ グ だ け で な く 、 ス タイ ル シ ー ト も 同様 に オブ ジェ クト と し て 扱わ れ ま す 。 た と えば 、 次 の よう に 記述 
する と スタ イル シー ト の 「background-color]」 プ ロ パ ティ に 黄色 が 設定 され ペー ジ 全 体 の 背景 色 が 黄色 に な 
り ま す 。 





document . body . sty1e .backgrounQdCo1or = "ye11ow": 


男 間 > 記述 方 法 

JavaScript で ペー ジ 上 の オブ ジェ クト に アク セス する 場合 に は 、 注 意 が 必要 で す 。 特に 以前 か ら 指定 され て 
いる 方 法 と 新しい 方 法 で は 記述 方 法 が 異な る た めで す 。 以前 は 以下 の よう に 参照 番号 や ハッ シュ 、 オ ブ ジ ェクト 
の プロ パテ ィ 名 と し て 指定 され て いま し た 。 


<1mg Sro="1mages/01 .]pg "> 
<1img sro="1mages/02 .]pg" name="1m2"> 
<1mg Sro="1mages/03 .]pg" name="1m3 "> 


document . images [0] .src = "images/ok.Jpg9": 
document . im2 .src = "1mages/ok.]pg": 
document . images [ "1m3" ] .Src = "images/ok. Jp9": 


も ちろ ん 、 最 新 の ブラ ウザ で も 古い ブラ ウザ で も 問題 な く 動作 し ます 。 特に 古い ブラ ウザ や 多く の ブラ ウザ に 
対応 させ な けれ ば な ら な い 場 合 は 、 こ の よう な 書き 方 の 方 が よい こと も あり ます 。 

新しい 書き 方 は DOM 仕 様 に 沿っ て 、 タ グ や テキ スト を ノー ド と し て 扱い ます 。 ノー ド に 対し て 各種 操作 を 行う 
こと で 、 テ キス ト を 追加 し た り 画像 を 変更 し ます 。 上 記 の 画像 を 入れ 替え る サン プル を 書き 換え る と 、 次 の よう 
に な り ま す 。 


<d ュ 1 1d= "photo"> 
<img sro="1mages/01 .Jpg"> 
<1img sro="images/02 .Jpg"> 
<1mg src="1mages/03 .]pg"> 
く /d1 マ > 
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の 


Yar photoArea = document .getE1emenEtByTqd ("photo" ) : 
var img = photoarea . getE]1ementsByTagName ("1mg" ) : 
For (Va 1=0: 1<img.1ength: ュ ++) { 

mg .1Eem (1 ) .src = "images/ok.]Jpg9" : 
} 


基本 的 に は 操作 対象 と する ノー ド に ID 名 を 指定 し 、「getElementByld()」 を 使っ て 情報 を 取得 し ます 。 ID 
名 だ け で な く 、 ス タイ ル シ ー ト の クラ ス 名 や 特定 の 属性 が 利用 され る こと も あり ます 。 サン プル の よう に 複数 
の 画像 を 操作 する 場合 に は 、「getElementsByTagName()」 を 使っ て 特定 の タグ の ノー ドリ スト を 取得 し ま 
す 。 ノー ド の 参照 は 「item()」 で 行う こと が で きま す が 、HTML 文 書 の 場合 、「img[i]」 の よう に 配列 形式 で 指定 
し て も 動作 し ます 。 XML な ど を 操作 する 場合 に は 、「item()」 を 使う よう に し て くだ さい 。 本 書 で は HTML 文 
書 の み 扱っ て いる の で 「img[i]」 の よう に 配列 と し て 処理 を 行っ て いま す 。 


(@'S[jiil JavaScript コ ー ド を コン パク ト 化 する 


開発 が 大 規模 な も の に な る と JavaScript コ ー ド が 肥大 化し 読み 込み まで に 時 間 が か か り ま す 。 何 万 人 
も の ユー ザー が アク セス する 場合 に は プロ グラ ムコ ー ド の サイ ズ に も 注意 し な けれ ば な り ま せん 。 幸い に 
し て JavaScript コ ー ド を コン パク ト 化 する ツー ル が いく つか 出 て いま す 。 その 1 つが 次 の URL に ある 
jsSmin] で す 。 


http://www.crockford.com/javascript/jSmin.html 


この ツー ル は JavaScript の 不要 な 改行 コー ド や 空白 だ け を カッ ト し て 詰め 込み コー ド を コン パク ト 化 し 
ます 。 使用 方 法 は コマ ンド ライ ン か ら 以 下 の よ うに コン パク ト 化 し て いな い フ ァイル 名 (fullsize.jS) と コ 
ン パ クト 化し た 際 の ファ イル 名 (compaoctSize.jS) を 指定 し ます 。 


./]smin.rb <./fFu11size.]S >compactSize.]8 










ele が 間 昌 wipeg_ ] 


ログ ラ 后 へ 、 
013 UK 








還 還 >) プロ グラ ム を 作成 する 場合 の 注意 点 


近年 、Java や C/C++ 言 語 な どか ら JavaScript を 扱う プロ グラ マ が 増加 し た せい か 、 こ れ ま で と は 異な る ス 
タイ ル の プロ グラ ム を 見 か ける こと も あり ます 。 プロ グラ ム 言 語 は 多く の 種類 が あり 、 関 数 型 言語 : オ ブ ジ ェクト 
指向 型 言語 な ど 大 き な カ テ ゴ リ で 分 けら れる こと も で きま す 。 

JavaScript は オブ ジェ クト 指向 型 の 言語 で す が 、 非 常に 柔軟 性 に 富ん で いる た め 同 じ 動作 を する プロ グラ 
ム を 記述 する 場合 で も 、 関 わっ て きた 言語 に よっ て スタ イル が 変わ っ て し まい ます 。 特に JavaScript ラ イブ ラ 
りな ど は 、 オ ブ ジ ェクト 指向 を より 強め た prototype.jS の よう な ライ ブラ リ も あれ は ば 、 関 数 指向 の MochiKit な 
ども あり ます 。 

プロ グラ ム ス タ イ ル は 人 それ ぞ れ で す が 、 さ ま ざ ま な ブラ ウザ 上 で 動く JavaScript コ ー ド を 記述 する の は 意 
外 と 面倒 で す 。 ライ ブラ リ を 利用 すれ ば 、 あ る 程度 は 吸収 し て くれ ます が 、 そ れ で も 限度 が あり ます 。 Firefox で 
動い て も Internet Explorer や Safari で 動か な いこ と は 多々 あり ます 。 た と えば 、XML デ ー タ や HTML デ ー タ 
で ノー ド を 参照 する 場合 で も 、 し っ か り と し た 互換 性 が な く 、 異 な る ブラ ウザ で 動作 させ る の は 手間 が か か り ま 
す 。 こ の 辺り D は 、 や は り Web サ イト を 参照 し た り 、 ノ ウ ハ ウ を た め る し か あり ませ ん 。 

数 年 前 に 書か れ た コー ド が 、 美 し く な いと する 新規 参入 プロ グラ マ も 多い で し ょ う 。 し か し 、 現 実 問題 と し て 、 
その よう に 書か な けれ ば 動作 し な いこ と が あっ た と も いえ ます 。 1 行 に まとめ て 記述 すれ ば よい の に ら 行 に 分 
け な い と 動作 し な いと いう よう な こと も あり ます し 、 メ ソ ッ ド か ら の 戻り 値 が 異な っ て いる な ど 仕 様 の 違い も 多く 
あり ます 。 お まけ に 、 新 し い ブ ラウ ザ が 出る と 、 そ の ブラ ウザ の 不具 合 に も 対応 し な けれ ば な り ま せん 。 

Web ペ ー ジ 上 で 使用 され る JavaScript プ ログ ラム の 寿命 は 長く な いた め 、 と りあ え ず 動け ば よい と いう づ 考 
え 方 も あり ます 。 た だ 、 今 後 長く 使え る よう な 技術 で あめ る XML や DOM の ノウ ハウ は 習得 し て お いて 損 は な いで 
し ょ う 。 また 、 自 分 が 書い た コー ド が 他人 に 引き 継が れる と きのこ と も 考慮 し て 作成 し て お く と 、 よ り よ いも の に 
な る は ず で す 。 


(WIWiilW 名 前 空間 と は 


名 前 空間 と は 、 複 数 の ライ ブラ リ を 利用 する 際 な ど に 、 変 数 名 や オブ ジェ クト 名 な ど が 重複 し こし まい 、 問 
題 が 起き る こと を 避け る た め の 概 念 で す 。 JavaScript に は 、 名 前 空間 を 指定 する た め の 命 令 が 用 意 さ れ 
て いま せん 。 この た め 、 ラ イブ ラリ な ど を 利用 し た 場合 な ど に 変数 名 や オブ ジェ クト 名 が 衝突 し て し まう こ 
と が あり ます 。 

そこ で 、JavaScript で は 、 擬 似 的 に 名 前 空間 を 利用 する 方 法 が と られ て いま す 。 基本 的 に は オブ ジェ ク 

ト を 生成 し 、 そ の プロ パテ ィ 名 を 名 前 空間 と し て 利用 し ます 。 また 、Yahoo UI ライ ブラ リ で は 名 前 空間 を 
指定 する た め の メ ソ ッ ド が 用 意 さ れ て いま す 。 た と えば 、 次 の サン プル で は 「KF」 と いう 名 前 の 名 前 空間 を 
指定 し て いま す 。 

















YAHOO .nameSspace ("KEF") : 
YAHOO .KF = Function ( ) { al1er( "名 前 空間 サン プル " ) : } 
YAHOO . KFE ( ) : 
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還 記 >) JavaScript ラ イブ ラリ の 種類 


Ajax の 普及 と と も に 、 多 く の JavaScript ラ イブ ラリ が 登場 し て いま す 。 JavaScript の ライ ブラ リ に は 、 次 の 
よう な 種類 が あり ます 。 


防 prOtotyDe.jS 

JavaSoript ラ イブ ラリ の 中 で も っ と も 多く 利用 され て いる の が 、prototypeJ」S ラ イブ ラリ で す 。 この ライ ブ 
ラリ は JavaScript の 基本 的 な オブ ジェ クト を 拡張 する こと に より 、 多 く の 機 能 を 提供 し て くれ ます 。 また 、 よ り 
オブ ジェ クト 指向 を 強め た 作り に な っ て いま す 。 prototype.js は JavaScript の 基本 オブ ジェ クト を 拡張 し て い 
る た め 場 合 に よっ て は 不具 合 を 起こ すこ と も あり ます 。 オブ ジェ クト を 拡張 し な い ラ イブ ラリ が よい の で あれ ば 
後述 する Dojo や Yahoo UI| ラ イブ ラリ を 利用 し て くだ さい 、。 
e D「OtOtyDG.jS 

http://Www.prototypejSs.Org/ 





防 SCriDt.aCulO.US 

prototype.js ラ イブ ラリ と と も に 多く 利用 され る の が 、 主 に エフ ェクト 処理 や コン トロ ー ル 処理 を 行う た め の 
Script.aculO.us ラ イブ ラリ で す 。 速度 は 速く あり ませ ん が 、 さ ま ざ ま な エフ ェクト や コン トロ ー ル を 手軽 に 扱う 
こと が で きま す 。 
@ SCTiDt. コ CUIO.US 

http:///script.aculo.us/ 





了 Dojo/Yahoo UI Library 

より 大 規模 な ライ ブラ リ と し て 提供 され て いる の が 、Dojo と Yahoo UI ライ ブラ リ で す 。 た だ し 、Dojo は 本 書 
執筆 時 点 (G007 年 4 月 ) で は 、 バ ー ジ ョ ン 1 未満 で あり 完成 形 と し て 提供 され て いま せん 。 この た め 、 バ ー ジ ョ 
ン ア ッ プ され た 場合 に は 本 書 の サン プル が 動作 し な く な る 可能 性 も あり ます 。 

Dojo も Yahoo UI ライ ブラ リ も 非常 に 多 機 能 で す が 、 そ の 分 だ け ラ イブ ラリ の ファ イル サイ ズ が 大 きく な り 、 
読み 込み に 時 間 が か か る こと が あり ます 。 Dojo は 動 的 に ファ イル を 読み 込み ます が 、Yahoo UI ライ ブラ リ の 場 
合 に は 必要 最低 限 の ファ イル だ け を 読み 込む お よう に し て お きま す 。 また 、Yahoo UI ライ ブラ リ で は 名 前 空間 の 
設定 な ど 、 大 規模 な プロ グラ ム に 配慮 し た 作り に な っ て いま す 。 

e Dojo 
http://dojotoolkit.Org/ 


* Yahoo UI Library 
http://developer.yahoo.Com/yui/index.html 


還 是 め )) jQuery 


jQuery は コン パク ト な サイ ズ で あり な が ら 、 高 機能 な 処理 を 行う こと が で きる ライ ブラ リ で す 。 作成 
され る プロ グラ ム も コン パク ト に な る 特徴 が あり ます 。XML/HTML 文 書 の 階層 構造 な ど を 指定 し て アク 
セス する こと が で きた り 、 標 準 で 主要 な エフ ェクト が 利用 で きま す 。 他 の ライ ブラ リ と 異な り 、 繰 り 返 し 
て 定義 し た り 、 処 理 し た りす る 記述 が 大 幅 に カッ ト さ れる た め 、 複 雑 な 処理 も 短い コー ド で 作成 する こと 
が で きま す 。 
e jQuery 

http://jquery.Com/ 





国 証 め )) Adobe Spry 


アド ビシ ステ ムズ が 提供 し て いる の が Adobe Spry フ レー ム ワ ー ク で す 。 ライ ブラ リ で は な く フ レー ム ワ ー ク 
と な っ て いる の は 、HTML 文 書 内 に 特定 の 属性 を 指定 する だ け で XML デー タ 処 理 や メニ ュー、 タ ブ パ ネル 、 エ 
フェ クト 処理 な ど を 行う こと が で きる た めで す 。 ある 程度 、 規 格 が 決ま っ て し まっ て いる た め 、 そ れ に 沿っ て 
HTML 文 書 を 作成 すれ ば よい こと に な り ま す 。 この た め 、 他 の ライ ブラ リ と 比較 し て 手軽 に XML デー タ 処 理 な 
ご ど を 行う こと が で きま す 。 

Adobe Spry 
http://labs.adobe.Ccom/technologies/Spry/ 


国 丁 際 》》) その 他 の ライ ブラ リ 


プロ グラ ム 技 術 を 必要 と し な い ラ イブ ラリ も あり ます 。 本 書 で も 使用 し て いま す が 、 ス ライ ド 表 示 処 理 な ど を 
行う ライ ブラ リ が いく つも 用 意 さ れ て いま す 。 有名 な も の と し て は 、「Lightbox」「ThickBox」「GreyBox」 
「Highslide」 な ど が あり ます 。 これ ら は HTML 文 書 内 の タグ に 特定 の 属性 と 値 を 設定 する だ け で 自動 的 に 処理 
を 行い ます 。 
eLightDox 

http://Www.huddletogether.Com/projects/IightDox ら / 


e ThiCkBOx 
http://jquery.Com/demo/thickbox/ 


e GreyBOX 
http://orangoo.Com/labs/GreyBox/ 


e Highslide 
http://Vikjavev.no/highslide/ 


男 証 >) ライ ブラ リ の 利用 方 法 

ライ ブラ リ を 利用 する に は ライ ブラ リ が 公開 され て いる ペー ジ で ライ ブラ リー 式 を ダウ ン ロ ー ド し ます 。 単純 
に ソー スコ ー ド だ けが 公開 され て いる の で あれ ば 、 ロ ー カ ルディ スク 上 に JavaScript フ ァイル と し て 保存 し ま 
す 。 Yahoo UI| ラ イブ ラリ な ど は スタ イル シー ト や 画像 デー タ な ども 正しい ディ レク トリ 階層 に 指定 し な いと 動 
作 し な い 点 に は 注意 が 必要 で す 。 








1 


書 党 記 暗 1dJOSBABT' 目 10 -3 ヨ IdVHO 





半 泊 泌 旧 G+dJOSBAB「' 目 [0 -3 ヨ IdYHO | 








凡 ミ ス ほ ど 見 つけ に くい 


プロ グラ ム で は 、 意 外 と 簡単 な ミス ほど 見 つけ に くい も の で す 。 半角 空白 が な か っ た り 、 不 要 な 部 分 
に 「,」 や 「:」 が 記述 され て いる 場合 は 、 ミ ス が 見 つけ に くく な り ま す 。 また 、 使 用 し て いる ブラ ウザ に よっ 
て も ミス が 発見 し に くく な り ま す 。 

た と えば 、 次 の サン プル は 余計 な 「.」( カ ンマ ) が 未 尾 に 入っ て いま す 。 これ は 、Internet Explorer や 
Safari、Opera で は エラ ー に な り ま す 。 し か し 、Firefox で は エラ ー を 起こ すこ と な く 、 正 し く 処 理 さ れ 


て し まい ます 。 
開発 の 際 に は 、 必 ず 複 数 の ブラ ウザ で 動作 を 確認 する こと を 忘れ な いよ うに し て くだ さい 。 その 方 
が ミス も 発見 し や すく な り ま す 。 
a = { 
"tyDe" :12, 
tes : funotion ( ) { alert("test"): }, 
} 
a.tes() : 








二 @ の eo: 較 Ge っ: 国 


有 、 Firefox を 使っ て みよ う 5 最新 ニュ ー ス 























Firefox で は エラ ー に 
な ら ず に 処理 され る 
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JavaScript を HTML 文 書 内 に 
SE ホ さる 








ここ で は 、HTML 文 書 内 に JavaScript の コー ド を 記述 す 
る 方 法 に つい て 解説 し ます 。 








っ Ciwavescrpt-5al | ち | le に 








下 の 画 像 は HTML 内 に 記述 し た JavaScmpt で 表示 し て いま す 。 


ペー ジ 内 に JavaScript で 書き 
出さ れ た 画像 が 表示 され る 





Eeemwe 当 目 用 用 本 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<me ヒ ta htp-equ1Y= "ConEen ヒ -type" conten ヒ =" モ ex 上 /htm1] : 
CharSe ヒ =uF-8"> 
< 上 ュ it 上]1e>JavaSoript Samp1e</ 上 1 上 ]e> 
<1ink re1="styleshee 上 " type="tex モ 上 /css" hrefF="main.Css" 
media="a11 "> 
</head> 
<body> 
下 の 画 像 は HTMTL, 内 に 記述 し た JavaScr1ip 上 で 表示 し て いま す 。 <b エ > 
く 8C エ 1D 上 上 ype=" ヒ ex / る aaSC エ 1p 上 "><!ーー 一 視 
documen .write ( "<1mg Sro='images/DSC0001 .jpg'>") : 一 話 
7 ニニ ッ </8G で まめ モ > 
</body> 
</htm1 > 
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豆 <script type='text/javascript'"> と し て 以下 の コー ド が JavaScript の プロ グラ ム で ある こと を 示す 
話 JavaScript の コー ド を 記述 する 





@jjg9】 遇 租 JavaScript の コー ド は <script> タ グ で 囲ま れ た 範囲 に 記述 する 


HTML 文 書 内 に JavaScript の プロ グラ ム を 記述 する に は 、<script> タ グ を 使い ます 。 <script> タ グ 
で 囲ま れ た 範囲 の プロ グラ ム が 実行 され ます 。 <script> は <head> 一 </head>、<body> 一 </body> の 
どちら で も 記述 する こと が で きま す 。 また 、<script> タ グ は 1 つの ペー ジ に いく つ で も 記述 する こと が で 
きま す 。 

現在 多く の ブラ ウザ で は [<script type='text/javasoript">」 の 表記 に 対応 し て いま す が 、 古 い ブ ラウ 
ザ で 問題 が 発生 する 場合 に は 「<script language="JavaScript">]」 と する か 、「<script type= 
"text/javaSCript' language='"JavaScript'">] の よう に 「type」 属 性 と 「language」 属 性 を 併記 し て く 
だ さい 。 
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JavaScript を HTML タ グ 内 に 
記述 する 








ここ で は 、HTML タ グ 内 に JavaScript の コー ド を 記述 する 方 法 に つい て 解説 し ます 。 
還 邊 目 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona]1 / /EN"> 
<htm] > 
<head> 
<meta h 上 上 DーeGqu1Y= "ConEen ヒ -type" ConEen ヒ ="E 上 ex 上 /htm] : 
CharSe ヒ =utF-8"> 
< 上 it 上 1e>JavaSo て ip 上 Samp1e</ ヒ 1 七 1e> 
<1ink re1]="sty1esheet" type="tex 上 /css" hrefF="main.css" 
media="a11 "> 
</head> 
<bodY テ > 
イベ ント ハン ドラ を 利用 し て HTMTL, タ グ 内 に JavaScr1p 上 を 記述 し て いま す 。 <b エ > 
※ マ ウス カー ソル を 重ね る と 画像 が 入れ 替わり ます 。 <b エ > 
<1mg Sro="1mages/DSC0001 .jpg" 
onmouSeover= "上 his . Sro= '1mages/DSC0002.jpg' "一 太 
onmouSeou ヒ =" this . Src='1mages/DSC0001.jpg' "> 一 許 
</body> 
</htm1 > 


の 19 事 8@) り ) 





攻 マウ ス が 重なっ た と き に 発生 する onmouseover イ ベン ト 時 の 処理 を 指定 する 
許 マウ ス が 離れ た と き に 発生 する onmouseout イ ベン ト 時 の 処理 を 指定 する 


@ 抽 人 映 旧 タ グ 内 に 記述 する 場合 は イベ ント ハン ドラ を 使う 


HTML タ グ 内 に JavaScript の プロ グラ ム を 記述 する に は 、 イ ベン トバ ハン ドラ を 利用 し ます 。 イベ ント 八 
ンド ラ に は 、 イ ベン ト 発 生 時 に 呼び 出さ れる 処理 を 記述 し ます 。 タグ 内 で 捕捉 で きる イベ ント は 数 多く あり 
ます 。 イベ ント ハン ドラ は 「on 一 」 で 始ま り 、 そ の 後に イベ ント 名 を 記述 し ます 。 実行 する JavaSoript の プ 
ログ ラム は 、「=」 に 続け て 記述 し ます 。 処理 が 長く な る 場合 に は 、 あ ら か じ め 処 理 す る 内 容 を 関数 と し て 定 
義 し て お き 呼 び 出す よう に し ます 。 





注意 点 と し て は 戻り 値 が 「true」 か 「false」 か に よっ て 動作 が 変わ る イベ ント ハン ドラ が あり ます 。 た と え 
ば 、<form> タ グ の 「onsubmit」 や 「onreset」、<a> タ グ の 「onmousover」l な ご ど が あり ます 。 な お 、 イ ベン 
ト ハ ンド ラ は HTML タ グ 内 に 記述 する 場合 は 、 大 文字 ・ 小 文字 を 問い ませ ん (プロ グラ ム 内 で は 全部 小文字 
に する 必要 が ある )。 
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sEcTION | 調 


別 フ ァイル の 
JavaScCript フ ァイル を 読み 込む 





ここ で は 、 別 ファ イル の JavaScript フ ァイル を 読み 込む 方 法 に つい て 解説 し ます 。 


看 
1 SOURCE CODE | 目 剛 index.htm 
<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta h ヒ Ep-eqdu1 マ = "ConEen ヒ -t 上 ype" Conten ヒ = "tex 七 /htm1 : 
CharSe ヒ =utfF-8"> 
(0 < ヒュ 上 1e>JaVaSo エ ip 上 Samp1e</ モ 1 上 1e> 
記 <1ink re]="styleshee" 上 ype="Eex 上 /css" hreF="main.CsS" 
ヨ media="a11 "> 
や < く SC エ 1Dp 上 上 ype= "上 ex ヒ 上 / JaVaSC エ 1D ヒ 上 " Sro= "main .]S"></ SCr1p キ > 一 斑 
SS </head> 
し _」 <body> 
寺 下 の ロ ー ル オー バー は 別 フ ァイル の JavaScr1p モ 上 ファ イル で 作成 し て いま す 。 <b エ > 
本 <1mg Sro="1mages/01 .Jpg" 1d="photo1 "> 
ク </body> 
= </htm1> 
/ 
ンク / 


頭 「src」 属 性 で 読み 込む JavaScript フ ァイル の URL を 指定 する 


ReMemee り 有用 用 本 RS 王 衣 上 main.jS 


window.on1oad = Funoction( ) { 一 馴 
document .getE1ementByTd ( "photo1 " ) . onmouseover = funot1on( ) { 
this .Sro = "1mages/02 .]Jpg": 
} 
document . getE1ementByTd ( "photo1 " ) .onmouseou 上 = fFunotion( ) { 
this.sro = "images/01 .]pg" : 
} 





台 ペー ジ が 読み 込ま れ た ら 画 像 を 入れ 替え る イベ ント ハン ドラ を 設定 する 
@ 捕 人 間 租 読み 込む JavaScript フ ァイル は 「src」 属 性 で URL を 指定 する 


JavaScript プ ログ ラム が 書か れ た ファ イル が HTML 文 書 ファ イル と は 別に な っ て いる 場合 、<script> 
タグ を 使っ て 読み 込ま せま す 。 読み 込む ファ イル の URL は 、「src」 属 性 で 指定 し ます 。 <script> タ グ 1 つ に 
つき 1 ファ イル し か 読み 込む こと が で き な い た め 、 複 数 の ファ イル を 読み 込ま せる 場合 に は <script> タ グ 





を 列記 し ます 。 な お 、<script> タ グ を 複数 記述 する こと が で き な い 場合 は 、55 ペ ー ジ の よう に ダイ ナミ ッ ク 
に JavaScript フ ァイル を 読み 込ま せる よう に する こと も で きま す 。 








| 還 | ICHAPrEko2pl ]ong 


ダイ ナミ ッ ク に 別 フ ァイル の 
JavaScCriDt フ ァイル を 読み 込む 








ここ で は 、 ダ イナ ミッ ク に 別 フ ァイル の JavaScript フ ァイル を 読み 込む 方 法 に つい て 解説 し ます 。 








ーーーー 


こん に ち は 







































最初 に [動作 を 確認 ] ボ タン を 「 こ ん に ち は 」 と 表示 され る 
クリ ッ ク す る と … 









癒 C:avaScript-Sal <| 全 |x | Live Search 


















今日 も いい 天気 で すね ! 


こん に ち は 














[Sub.jS を 読み 込み ]」 ポ タン を クリ ッ ク す る と 別 の JavaScript フ ァ 読み 込ま れ た プロ グラ ム を 実行 する こと が で きる 
イル が 読み 込ま れ 、 再 度 [ 動 作 を 確認 ] ボ タン を クリ ッ ク す る と … (「 今 日 も いい 天気 で すね !」 と 表示 され る ) 


9 当 目 用 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 


<htm] > 
<head> 

<me ヒ ta h ヒ 上 わ -@Gqu1 マ = "Con ヒ en ヒ 上 ype" Conten ヒ ="Eex モ 上 /htm1: 
CharSe ヒ =uF-8"> 
< ヒュ 1 上 1e>JaVyaSC エ 1p モ Samp1e</ ヒ ュ 1E1e> 
<1ink re]="sty1eshee" ype="Eext/css" hrefF="main.CSS" = 
media="a11 "> 1 
<SCr1ip type= "ex /aVaSC エ 1p ヒ " SC= "main .5"></ SCr1p セ > 一 玉 


</head> 
<Dody テ > の 
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くう <Form action=" ./1oad]s .Cg1" method= "get 上 " name="ma1inForm"> 
<1npu type="butEon" 1d="ocheokBu て ton" Ya1ue=" 動作 を 確認 "> 
<1nput type="buEon" 1d="1oadBu モ Eon" Ya1ue=" Sub . 8 を 読み 込み "> 
</ Form> 
<dQ1V 1d="resu1 モ "> 結果 :</d ュ マッ > 
</body> 
</htm1 ユ > 





豆 他 の スク リプ ト を 読み 込む た め の JavaScript フ ァイル を 指定 する 


SeXeee 当 目 用 用 王 半 輝 main.js 


w1ndow.on1oad = Funotion ( ) { 
document . getE1emenEBy エ Td ( "checkBu モ Eon" ) .onc1ick = Funotion ( ) { 


document . getE] emenEBy エ Td ( "resu1 ヒ " ) . innerHTML, = "こん に ち は ": 
} 
documen . getE1emenEBy エ Td ( "1oadButEon" ) .onc1ick = Funotion( ) { 
var sorip = dooument .createE1ement ("scrip" ) : 一 楼 
8C エ 1p モ . charse = "utFE-8『": 
SCript . src = "sub.]s" : 一 峰 


document . body . appendChi 1d ( scrip) : 一 回 
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台 <Script> タ グ を 生成 する 
話 読み 込む JavaScript フ ァイル の URL を 指定 する 
医 ページ 未 尾 に 追加 し JavaScript フ ァイル を 読み 込ま せる 








eenwe 当 目 用 用 本 計 消 sub.js 


document . getE1emen て ByTqd ( "checkBu モ ton" ) .onc1ick = Funotion( ) { 
document . getE1ementByTqd ( "resu1 七 " ) . innerHTMT, = "今日 も いい 天気 で すね !" : 
} 


(@ji 当 上 <Script> タ グ を 生成 し て ペー ジ に 連結 する 
状況 に 応じ て 必要 な JavaScript フ ァイル を 読み 込ま せる こと が で きま す 。 まず 、「document. 
createElement()」 で <script> タ グ を 生成 し 、 各 プロ パテ ィ を 設定 し ます 。 「src」 プ ロ パ ティ に は 、 読 み 込 
む JavaScript フ ァイル の URL を 指定 し ます 。 設定 が 終わ っ た ら 「document.body.appendChildO」 で 








ペー ジ 未 尾 に 追加 し ます 。 
な お 、JSON 形 式 の デー タ も 同様 の 方 法 で 読み 込ま せる こと が で きま す 。 











SE 1 人 図 肛 CHAPTER-02 


0 上 後付け で イベ ント を 定義 する 








ここ で は 、HTML 文 書 の タグ に 後付け で イベ ント を 定義 する 方 法 に つい て 解説 し ます 。 








守 aw ーー 
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結果 : 
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結果 : イ ベン ト 発 生 (ポタ ン D 





plEZ ア 3 
ボタ ン を クリ ッ ク す る と 、 後 付け で 設定 い 


され た プロ グラ ム が 実行 され る 結果 : イ ベン ト 発 生 (ボタ ン 1) 
イベ ント 発生 (ボタ ン うぅ 








目 朋 用 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 


<htm] > 
<head> 
<meta h 上 上 p-equ1V= "ContenE-type" Conen キ ="ex 七 /htm1 : っ 
CharSe キ =utF-8"> 4 ご 


< モ ュ 上 1e>JavaScrip Samp1]e</ ヒ 1 上 1e> 
<1ink re]="sty1eshee" ype="text/css" href="ma1in.CsS" = 


media="a11 "> ゃ の 
く 8C エ 1p 上 上 yDe=" 七 G 訪 / ] る で aSC エ 1 や 七 " SC= "ma1nm .]S "></ SC エ 1D ヒ > 
</head> 
<body> 


<Form acoion=" ./seteven . Cg1" method= "ge 上 " name="mainForm"> 
<1inpu type="button" 1qd="ocheojkButton1" ゞ a1ue= "ボタ ン 1 "> 
<1npu type="button" 1d="oheclkButEon2" ya1ue= "ボタ ン 2 "> 記 」 
</ Form> 
<d ュ で 1d=" ェ esu1 モ "> 結果 :</d1 マ > 
</body> 
</htm1> 


豆 イベ ント を 割り 当て た い タ グ に ID 名 を 指定 する 
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SeWXewe ョ 当 目 用 | 本 本 衣 具 main.js 


ifF (window .addEventListener) { 
window . addEventListener ("1oad" , setEven1 , Fa1Se) : 
window . addEventLisEener ("1oad" , setEven2 , fa]se) : 
} 
F (window .a 上 tachEvenE) ( 
window . at 上 taohEven ("on1oad" , SetEven1 ) : 
window . a 上 tachEven ( "onload" , SetEVen 二 2 ) : 
} 
Funotion setEven1 ( ) { 
document . getE1emenEtByTd ( "checkButton1 " ) .onc1iock = Funotion( ) { 
document . getE1ementByTdq ( "resu1" ) . innerHTMTL, += = 
イベ ント 発生 (ボタ ン 1 ) <b ェ >" : 
} 





} 

Funotion setEven2 ( ) { 

document . getE1ementByTd ( "checkButton2" ) .onc1ick = Funotion( ) { 
document . getE1emenEByTq ( "resu1" ) . 1nnerHTML, += 
"イベ ント 発生 (ボタ ン 2 ) <br>『" : 


台 DOM(Document Object Model) に 準拠 し た ブラ ウザ の 場合 は 「window.addEventListener()」 で イベ ント を 設 
定 する 
許 nternet Explorer の 場合 は 「window.attachEvent()」 で イベ ント を 設定 する 


NSI INH 装 脂 0- コ 1dVHO 


(@7iBge】 個 後付け で イベ ント を 設定 する に は 「addEventListener」「attachEvent」 を 利用 する 

HTML 文 書 内 に 定義 され た ボタ ン な ど に イベ ント を 設定 する に は 、 あ ら か じ め 設 定 し た い タ グ に ID 名 を 
指定 し て お きま す (prototype.jS や jQuery な どの ライ ブラ リ を 利用 すれ ば ID 名 を 指定 し な く て も 設定 する 
こと が で きる ) 。 DOM(Document Object Model) に 準拠 し た ブラ ウザ の 場合 は 「addEvent 
Listener()」 を 使っ て イベ ント を 追加 し ます 。 イベ ント 名 は 「on 一 」 が 付か な い 状 態 で の 記述 に な り 、 た と え 
ば 、「onmouseover」 で あれ ば 「mouseover」 と 指定 し ます 。 

Internet Explorer の 場合 は 「addEventListener()」 が 使え な い の で 、「attachEvent()」 を 使っ て イ 
ベン ト を 追加 する こと が で きま す 。 

イベ ント を 設定 する 場合 、 こ れ ら の メソ ッ ド で は な く オ ブ ジ ェクト に イベ ント ハン ドラ を 指定 する 形 で も 可 
能 で す 。 た と えば 、 本 書 の サン プル で は ペー ジ の 読み 込み が 完了 し た 場合 に は 、「window.onload= 


function01- 明 と し て 設定 する こと も で きま す 。 た だ し 、 他 の 場所 で 同様 の コー ド を 記述 し た 場合 、 後 か ら 
指定 し た 処理 が 有効 に な り 、 以 前 の 処理 は 上 書き され 消え て し まい ます 。 これ を 防ぐ た め に は 、 
「addEventListener()」「attachEvent()」 を 使い ます 。 これ ら の メソ ッ ド で は 、 以 前 に 設定 され た 処理 は 
消さ れず に 追加 され る 形 に な り ま す 。 共同 作業 や 複数 の ライ ブラ リ や プロ グラ ム を 利用 する 場合 に は 、 
「addEventListener()」「attachEvent()」 を 利用 する 方 が 安全 で す 。 
「addEventListener()」「attachEvent()」 で 設定 し た イベ ント は 、 そ れ ぞ れ 、「removeEvent 
Listener()」「detachEvent()」 を 使っ て 指定 し た イベ ント の み 削 除 す る こと が で きま す 。 
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便 用 し て いる ブラ ウザ で DOM が 
使え る か どう か 判別 する 












ここ で は 、DOM(Document Object Model) が 使え る ブラ ウザ か どう か 判別 する 方 法 に つい て 解説 し ます 。 


ReiWXemwe 要 目 用 | 本 同 了 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4 .01 Transitiona1 / / EN "> 
<htm1> 
<head> 
<meta h ヒ 上 上り -Gdu1 マ = "で ConEen ヒ type" Conten ヒ = "Eeex 上 /htm1 : 
CharSe ヒ =uF-8 "> 
< ヒュ 1 上 1e>JaVaSCr1p ヒ Samp1e</ ヒ 1 七 1e> 
<1ink re]1="styleshee" type="texE/oss" hrefF="main.Css" 
media="a11 "> 
<8C エ 1p 七 上 yDe= "上 @ 七 / るび aSC エ 1 上 " 5 エ C= "ma1n . 8S "></ SC エエ p セ > 
</head> 
<Dody> 
お 使い の ブラ ウザ で は <b ェ > 
<d1iv 1d="resu1 ヒ "> 結果 :</Q ュ > 一 年 
</body> 
</htm1> 





結果 を 表示 する 領域 を 指定 する 
Regmeeg 当 目 用 用 本 WE 本 前 輝 main.js 


window.on1oad = funotion( ) { 
ifF (document .getE1ementByTd) { 一 名 
document . getE]emenEBy エ Td ( "resu1 モ " ) .1nnerHTMT, = "DOM が 利用 で きま す " : 
)e1set 
document . getE1emenEByTdq ( "resu1 ヒ " ) . innerHTMT, 
} 


"DOM は 使え ませ ん " : 一 許 

















台 DOM に 準拠 し た ブラ ウザ の 場合 は 「document.getElementByld()」 が 使え る の を 利用 し て 判別 する 
話 |「document.getElementByld()」 が 使え な い 場 合 に は DOM に 対応 し て いな いと みな す 





(je】 回 租 DDM が 利用 で きる か どう か は 「document.getElementByld」 の 有無 で チェ ッ ク す る 


ブラ ウザ が DOM 関 連 の メソ ッ ド に 対応 し て いる か どう か は 、「document.getElementByld()」 が 使え 
る か どう か で 判別 を 行い ます 。 た だ し 、DOM が 使え る ブラ ウザ で あっ て も 、 す べ て の DOM 関 連 の メソ ッ ド 


や プロ パテ ィ を 扱う こと が で きる わけ で は な い の で 注意 し て くだ さい 。 また 、 メ ソ ッ ド が 利用 で き て も ブラ 
ウザ に よっ て 動作 が 異な る こと が ある た め 、 利 用 の 際 に は 注意 が 必要 で す 。 
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021 使用 し て いる ブラ ウザ が 





021 





何 な の か を 判別 する 
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ここ で は 、 ブ ラウ ザ と OS の 種類 を 判別 する 方 法 に つい て 解説 し ます 。 












⑦ 〇 つの ・ | comesersm ・| |。|x Live search 


ーーーーーー = | 合 ・ 回 ー 中 












ブラ ウザ の 判別 






細 Javascrpt sample に | 倉 ・ 回 ・ 唱 ・ 


の eee 還 E X Live Search 






> 








ブラ ウザ の 判別 


ぷ 


Intemet Explorer 


Windows 


























ボタ ン を クリ ッ ク す る と … 
使用 し て いる ブラ ウザ と 





















0S 名 が 表示 され る 二 コン ピュ ー タ | 保護 モー ド : 無効 昌 1009% ・ 


Re7WXe 事 9e り 当 目 用 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transi モ iona1 / /EN"> 
<htm1 > 
<head> 
<meta http-equ1 ゞ = "Conten ヒ -ype" ConEen ヒ ="Eex/htm] : 
CharSset=utF-8"> 
< モ ュ 上 1e>JaVaSC エ 1p 七 Samp1e</ ヒ 上] ら > 
<1ink re1="sty1eshee ヒ 上 " type="tex モ 上 /css" hreF="main.CsS" 
media="a11 "> 
く SC エ 1p 上 上 De=" 七 ら x 七 / る で a8C エ 1D 七 " SC="ma1n . 8 "></ SC エ 1D ヒ > 
</head> 
<body> 
<h1> ブ ラウ ザ の 判別 </h1> 
<Form acion=" ./chkbrowSer .Cd1" method= "ge 上 " name="ma1nForm"> 
<1npu 上 ype= "bu 上 ton" 1d="checkButEon" Ya1ue=" ブ ラウ ザ チ ェ ッ ク "> 
< く / Form> 
<d1iy 1d="resu1 上 "> 結果 :</d1 マ > 
</body> 
</html]> 








SeiWYe 雪 ee 当 目 用 本 WE 表 mainjs 


window.on1oad = Funotion( ) 
document . getE1ementByTQ ( "checkBu 上 ton" ) .onc1ick = Funotion( ) { 
documen . detE1emenEByTqd ( "て esu1" ) .1nnerHTMT, = 
browSer . 上 yDe ( ) +" < わ エ >" : 
documen . detE1ementByTq ( "て esu1" ) .1nnerHTMTL, += browser . OS( ) : 
} 
} 
Ya browser = { 
type : funotion( ) { 
if (window.opera) return "Opera" : 一 駐 
1F (window . CreaePopup ) return "TnEerne Exp1orer" : 一 略 T 
1fF (navigaor .uSerAgent . indexOFf ( "SaFar1" ) > -1) return "SafFar1": 
ュ if (navigaor .userAgent . indexOFf ( "FirefFox") > -1) “。 
ェ return "FirefFox": r プ に 
return "不明 ": 一 戻 
よ 
OS : function( ) { 
if (navigator .userAgen . 1ndexOE ("Windows" ) > -1) キ 。 Im 
eturn "Windows": ー ィ 
ifF (navigator .userAgent . indexOEf ( "Mac" ) > -1) return "MacOS" : 一 包 
if (navigator .userAgent . indexOf ( "X11") > -1) return "UNTX" : 一 諾 


トー 


…ODpera か どう か は 「window.opera] プ ロ パ ティ の 有無 で 判別 する 

…Internet Explorer か どう か は 「window.createPopup」 メ ソ ッ ド が 利用 で きる か どう か で 判別 する 

…Safari か どう か は ユー ザー エー ジェ ント の 文字 列 に 「Safari」 の 文字 が 含ま れる か どう か で 判別 する 

…Firefox か どう か は ユー ザー エー ジェ ント の 文字 列 に 「Firefox」 の 文字 が 含ま れる か どう か で 判別 する 

… 判 別 不能 な 場合 は 「 不 明 」 の 文字 列 を 返す 

…OS が WindowS か どう か は ユー ザー エー ジェ ント の 文字 列 に 「Windows」 の 文字 が 含ま れる か どう か で 判別 する 

…ODS が Mac0S か どう か は ユー ザー エー ジェ ント の 文字 列 に 「Mac」 の 文字 が 含ま れる か どう か で 判別 する 
…OS が UNIX( 互 換 0S 含 お) か どう か は ユー ザー エー ジェ ント の 文字 列 に 「X 1 1」 の 文字 が 含ま れる か どう か で 判別 する 


回 回 回 回 回 回 回 回 


@】 拓 9】 映 衣 ブラ ウザ の 判別 は 独自 プロ パテ ィ / メ ソ ッ ド と ユー ザー エー ジェ ント を 利用 する 
ブラ ウザ が 独自 の プロ パテ ィ や メソ ッ ド を 持っ て いる か どう か で ブラ ウザ の 判別 を 行い ます 。 その 後 で 
ユー ザー エー ジェ ント の 文字 列 内 に ブラ ウザ 固有 の 文字 列 が 含ま れ て いる か どう か 調べ ます 。 た だ し 、 ユ ー 
ザー エー ジェ ント は 必ず し も 使用 し て いる ブラ ウザ を 示し て いる と は 限ら な いた め 1 0096 ブ ラウ ザ を 判別 
で き な い 場合 が あり ます 。 
また 、0S 名 を 調べ る に は 、 ユ ー ザ プー エー ジェ ント 内 に OS を 示す 文字 列 が ある か どう か で 判別 を 行い ま 
す 。 OS の 判別 も ブラ ウザ の 判別 同様 に ユー ザー エー ジェ ント が 正しい と は 限ら な いた め 正 確 に 判別 で き 
な い 場 合 が あり ます 。 
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sEcTioh 還 議 


@ 亡 朝 4 オブ ジェ クト や 変数 の 型 を 調べ る 
















































ーー こ で は 、 オ ブ ジ ェクト の 型 を 調べ 、 そ れ ぞ れ の 型 に 応じ て 処理 を 振り 分 ける 方 法 に つい て 解説 し ます 。 
e っ | camesrpt cm | x uive search 
2w |@ 和 mvasrpt sampe | | 全 * 回 ・ ーー 
還 数 値 「 123」 が ら 倍 
と され た 結果 
エ 
史 こん に ち は 
て ) 
ト う っ 
上 コン ピュ ユー タ | 保護 モー ド : 無 区 
テ 関数 [jsTest」 が 文字 列 「Jinbouchou」 の オブ ジェ クト の 型 を 調べ 、 そ の 
グ 実行 され た 結果 文字 数 を 数 えた 結果 型 が 数 値 な ら 値 を ら 倍 し 、 文 字 
マ 列 な ら 文 字数 を 数 え 、 関 数 な 
Z ら そ の 関数 を 実行 する 


ee 事 9e 当 上 用 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transi モ iona1] / /EN"> 
<htm1 > 
<head> 
<meta htp-equ1 マ = "ConEen ヒ -type" Conten ヒ ="Eex 七 /htm] : 
CharSse モ =utF-8"> 
< ヒュ 1 上 1e>JavaSo エ 1p 上 Samp1e</ ヒ 1E1e> 
<1ink re]="st 上 yleshee" type="tex モ 上 /css" hrefF="main.Css" 
media="a11 "> 
く SC エ 1p 上 上 yDe= "上 ex / る VaSC エ 1D 上 "So= "ma1in . 8 ">< を SC エ 1p ヒ > 
</head> 
<body> 
<h3> 数 値 、 文 字 列 、 関 数 で それ ぞ れ 処理 を 振り 分 け て いま す 。 </h3> 
<d1 ゞ 1d="resu1 モ "> 結果 :</d ュ マッ 
</body> 
</htm1 > 





い @)9I@ 





ほ ge 可 当 朋 用 用 本 WE 王 机 mainjs 


window .on1oad = Funoction ( ) { 
Yar res = Qdocument .getE1emenEByTdq ( "reSu1") : 
res . 1nnerHTMT, = cheockType(123) +"<br>" : 一 環 
res . 1nnerHTMT, += cheokType ( "Jinbouchou " ) +"<b エ >" : 一 許 
reS . 1nnerHTMT, += oheockType(]SsTes 上 ) +"<b ェ >" : 一 回 


} 

Funotion checkType (checkData) { 
3fF (て typeof (checkData) == "numbper") return checkData * 2: 一 回 
F (typeof (checkData ) == "st 上 ring") return cheockData . 1 ength : 一 回 
ifF (typeof (checkData) == "Funotion") return oheokData( ) : 一 話 

} 


Function jsTes( ) 【 
return "こん に ち は ": 


+ー 


… 引 数 に 「123」 と いう 数 値 を 指定 し て 関数 「checkType」 を 呼び 出す 

"引数 に 「Jinbouchou」 と いう 文字 列 を 指定 し て 関数 「checkType」 を 呼び 出す 
… 引 数 に 「jSTest」 と いう 関数 を 指定 し て 関数 「checkType」 を 呼び 出す 
…「typeof(O」 の 結果 が 「number」 で あれ ば 型 は 数 値 で 、 ら 倍 に し て 返す 
…「typeof(O」 の 結果 が 「string] で あれ ば 型 は 文字 列 で 、 文 字 列 の 長 さ を 返す 
…Ttypeof()」 の 結果 が 「function] で あれ ば 型 は 関数 で 、 関 数 を 実行 し 結果 を 返す 


(@ 抽 9】 映 旧 オブ ジェ クト の 型 は 「typeof()」 で 調べ る 


JavaSoript で は 変数 や オブ ジェ クト の 型 は 、 状 況 に 応じ て 変化 し 、 固 定 的 で は あり ませ ん 。 自由 度 が 高 
く 便利 な 反面 、 数 値 と 思っ て 加算 し た ら 文 字 列 と し て 連結 され て し まっ た と いう 状況 も あり ます 。 この よう 
な 場合 は 、「typeof0」 を 使っ て 型 を 調べ て 処理 を 振り 分 け ま す 。 


「typeof() 」 の 戻り 値 内 容 
boolean ブー リア ン ( 真 偽 ) 











function 関数 
number 数 値 
object 

string 

undefined 
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023 オブ ジェ クト が 存在 し な い 場 合 の み 
新た に オブ ジェ クト を 生成 する 
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ここ で は 、 オ ブ ジ ェクト が 存在 し な いと き に ボタ ン を クリ ッ ク し た 場合 の み 、 新 た に オブ ジェ クト を 生成 する 方 


法 に つい て 解説 し ます 。 
オブ ジェ クト が な い 状 態 













オブ ジェ クト が 存在 し な いと き に 、 オブ ジェ クト が 存在 し な いと き に 、 


[ボタ ン 1] ボ タン を クリ ッ ク す る と 、 [ボタ ン 2] ボ タン を クリ ッ ク す る と 、 
「text]」 プ ロ パ ティ に 「 り ん ご 」 が 入っ 「text]」 プ ロ パ ティ に 「 み か ん 」 が 入っ 
た オブ ジェ クト が 生成 され る た オブ ジェ クト が 生成 され る 















ボタ ン 2 | | 円 容 の 表示 | 


























[内 容 の 表示 ] ボ タン を クリ ッ ク す 
る と 、 現 状 の オブ ジェ クト の 「text]」 
プロ パテ ィ 値 が 表示 され る 


1SOURCE CODE | 四 計 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4 .01 Trans1tiona1 / /EN"> 
<htm1] > 
<head> 
<meta htp-equ1i マ = "Conten 七 -t 上 ype" Conten キ ="Etex モ 上 /htm1: " 
CharSeG ヒ =ut 上 F-8"> 
< キュ ヒ ] 6>JavaSC1p Samp1e</ ヒ 1 上 1e> の 


<11nk re]="sty1eshee ヒ " ype="ex 七 /css" hreF="main.cCss" 
media="a11 "> 
ぐ 8SC エ 1p 上 De=" ヒ 上 / Ja マ aSC エ 1p ヒ "So="ma1n . 8"> く / SC エエ や ヒ > 
</head> 
<body テ > 
<Form acCt1on=" ./newob] . Cd1" method= "ge モ " name="ma1inForm"> 
<1npu ヒ 上 上 ype= "Du 上 ton" 1d= "makeButon1" ゞ a1ue=" ボ タン 1 "> 








<1npu ype= "bu 上 ton" 1d= "makeButon2" ゞ a1ue=" ボ タン 2 "> トー 
<1npu type="buEton" 1d= "malkeBut モ on3" Va1ue=" 内容 の 表示 "> 
</ Form> 
<d ュ 1 1d="resu1 上 "> 結果 :</d1 マ > 
</body> 
</htm1 > 
〇 
SeXe 事 9e) り 当 目 用 目 main.jS に 
レコ 
Yar ma1nOb] : 
window.on1oad = funotion( ) { ら 
document . getE1ementByTd ( "makeBu て ton1 " ) .onc1iock = funotion( ) { 
mainOb] = mainOb] | | { "text" : "D ん ご" }): 一 環 量 
document .getE1ementByTq ( "resu1" ) . innerHTMT, = mainOb] . 上 ex : 本 
} 用 
document . getE1ementByTdqd ( "makeBuEton2" ) .onc1iok = Funotion( ) { グ 
mainOb〕 = mainOb] | | { "text" : "みか ん " }): 一 略 ク 


document . getE1emenEByTd ( "resu1 上 " ) .1innerHTMTL, = mainOb] .Eex 


} 

document . getE1emenEByTd ( "makeButon3" ) .onc1ick = Funotion( ) { 
document . getE1ementByTd ( "resu1 モ " ) .1nnerHTML,+= = m 
"<b エ > "+ma1nOb] . 上 ex : 4 


副 mainObj」 オ ブ ジ ェクト が 存在 し な い 場 合 に は 「 1 "text' : "りん ご " | 」 と し て 新た に 生成 する 
許 「mainObj」 オ ブ ジ ェクト が 存在 し な い 場 合 に は 「 | "text' : "みか ん " ] 」 と し て 新た に 生成 する 
…TmainObj」 オ ブ ジ ェクト の 「text」 プ ロ パ ティ の 内 容 を 表示 する 


@ 頂 沿 】 映 瞳 オ ブ ジ ェクト の 有無 は 「 | | 」 で 判別 する 
オブ ジェ クト が 存在 し な い 場 合 の み メ ソ ッ ド / プ ロ パ ティ を 設定 する に は 、「 | | 」 を 使い ます 。 「 | | 」 の 前 に 調 
べた い オ ブ ジ ェクト 名 を 記述 し 、「 | | 」 の 後ろ に オブ ジェ クト の 定義 を 記述 し ます 。 「 | | 」 は 演算 子 で 、「 || 」 の 
左側 が 偽 (false、null、undefined) で あれ ば 「 | | 」 以 後 の 処 理 を 行い ます 。 この た め 、 す で に オブ ジェ クト が 


定義 され て いれ ば 「 | | 」 の 前 の オブ ジェ クト が 、 そ う で な けれ ば 以後 に 続く 処理 が 行わ れる こと に な り ま す 。 
「 | 」 で 判別 し な く て も 「if] を 利用 し 、「if(( オ ブ ジ ェクト ) オブ ジェ クト の 定義 ] と する こと も で きま す 。 
「 | | 」 を 利用 し た 場合 に プロ グラ ム が 読み に くい の で あれ ば 、「if を 使う の が よい で し ょ う 。 
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一 定時 間 後 に 
0 アア | 一 度 だ け 処 理 を 行う 
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ここ で は 、「setTimeout()」 を 使い 、 一 定時 間 後 に 一 度 だ け 処 理 を 行う 方 法 に つい て 解説 し ます 。 
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モッ ツァ レラ チー ズ 






お 勧め メニ ュー 














、 末 コン ピュ ー タ | 保護 モー ド : 無効 
= べ ペ ロン チー ノ 








プロ シュ ー ト 








3 秒 後に 段落 内 の ス 
タイ ル が 切り 替わる 





モッ ツァ レラ チー ズ 








、 画 コン ピュ ー タ | 保護 モー ド : 無効 


0I く の @) 





前 証明 有用 馬 軸 珍 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 
<htm1 > 
<head> 
<meta htp-equ1 マ = "ConEen ヒ -type" conten ヒ ="Eex 上 /htm1] : 
Cha エ SeG キ =uF-8"> 
< ヒュ 上 1e>JaVaSoCr1p Samp1e</ モ 上 1e> 
<1ink re]="sty1eshee 上 " type="EexE/css" hrefF="main.css" 
med1ia="a11 "> 
く 8C エ 1Dp 上 上 yDe=" ヒ ex / ] る aSC エ 1D 七 " SC="ma1n .S "></ SC エ 1p セ > 
</head> 
<body テ > 
<h1> お 勧め メニ ュー< /h1> 
<p> ペ ペロ ンチ ー ノ </p> 
<p> プ ロシュ ー ト </p> 
















<p> モ ッ ツ ァ レ ラチ ー ズ </p> 
</body> 
</htm1> 


eg 当 目 用 用 本 RS 二 交 main.js 


window.on1oad = funoction ( ) { 
SetT1meou ("sty1eChange .paragraph ( ) ", 3*1000) : 一 馴 
} 
Yar styleChange = { 
paragraph : fEunotion( ) { 
Var pTag = qdocument .gqetElementsByTagName ( "p" ) : 
For (Var 1=0: 1<pTag.1ength: ュ ++) { 
pTag [1] .className = "norma1": 
} 





SOUKRCE 


} 
} 


頭 「setTimeout()」 で 指定 秒 数 後に 実行 され る 処理 と ミリ 秒 を 指定 する 


@7jfg】 映 個 指定 秒 数 後に 一 回 の み 処 理 を 行う に は 「setTimeout()」 を 使う 


「setTimeout()」 を 使え ば 、 指 定 し た 処理 を 指定 秒 後に 1 回 だ け 呼 び 出す こと が で きま す 。 秒 数 は ミリ 
秒 で 指定 する た め 、1 秒 後に 処理 する の で あれ ば 「 1 000」 を 指定 し ます 。 「3* 1 000」 で あれ ば 3 秒 後 に 処 
理 が 実行 され る こと に な り ま す 。 た だ し 、「setTimeout()」 で 指定 し た 時 間 は 厳密 で は な いた め 、 動 作 時 間 
に 関し て は 保証 され ませ ん 。 


「setTimeout()」 で 設定 し た タイ マー を 解除 する に は 、「clearTimeout()」 を 使い ます 。「set 
Timeout()」 は 、 タ イマ ー が 設定 され る と タイ マーID を 返し ます 。 この タイ マーID を 「clearTimeout()」 
の パラ メー タ に 指定 する こと で 、 タ イマ ー を 停止 させ る こと が で きま す 。 た だ し 、 一 度 停止 し て し まっ た 夕 
イマ ー を 再開 させ る 機能 は あり ませ ん (一 時 停止 の 機能 は な い )。 

な お 、 1 回 の み で は な く 定 期 的 に 処理 を 呼び 出す に は 、「setlInterval()」 を 使い ます (66 ペ ー ジ 参照 )。 














(Wiil 明 Internet Explorer で の 非同期 通信 で の デッド ロッ ク を 回 避 す る 
Internet Explorer で まとめ て 非同期 通信 の リク エス ト を 発行 する と 、 一 時 的 に 画面 の 更新 が 停止 し て 
し まう こと が あり ます 。 この よう な 場合 に は 、「setTimeout()」 を 利用 し て 処理 時 間 を 空け る こと で 回 避 す 
る こと が で きま す 。 な お 、 こ の 現象 は 他 の ブラ ウザ で は 発生 し ませ ん 。 





aJaxProcceSS ( ) 


- 琴 開 際 W- 


setT1imeou ( "ajaxProooess ( ) ", 500): 
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CHAPTER-02 P 025 














ここ で は 、「setlnterval()」 を 使い 、 一 定時 間 ご と に 処理 を 繰り 返し 行う 方 法 に つい て 解説 し ます 。 





間 2 ceees ・|>|xlleesera 補 和 時 
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次 | 





@ Javaserpt sample 開 上 合 < Res9eos。 












1 9 @ cosesomrsw -| っ | x ueser の ー=」 
Se の meeomeme |) らち ・Q・e・ 






























セー ル 開 催 中 2 = EE 
1 参る Comesoprse ・| ヶ x | ue seara 四 幼 二 9 
aa ー oo ーー 欠 ・ 回 ・ 下 ・ 由 














セー ル 開 催 中 














卓 コン ピュ ー タ | 年 護 モ 











井 コン ビュー タ | 保護 モ ] 


1 秒 ご と に 段落 の 
背景 を 変化 させ る き 





井 コン ピュ ー タ | 保護 モー ド : 無効 。 累 1009% ・ 


ReWXe 事 9@ 直 目 上 用 昨 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / / EN"> 
<htm]> 
<head> 
<meta htDp-equ1 マ = "ConEen キ -t 上 ype" conten キ = "tex 七 /htm] : 
CharSeG ヒ =uEF-8"> 
< ヒュ 1 上 6> 了 JaVaSC エ 1p 七 Samp1e</ ヒ ュ ヒ 1e> 
<11ink re1="styleshee" type= "tex 七 /css" hreF="main.CsS" 
media="a11 "> 
ぐ 8C エ 1Dp 上 上 yDe= " ヒ @x / aaSC エ 1D 七 " S エ o= "ma1im . 8 "></ SC エ 1p セ > 
</head> 
< く Dody テ > 
<h3> セ ー ル 開催 中 </h3> 
< く p> 9 0 も OFE</p> 
</ body> 
</htm1 > 





Sv)9(@ 事 @)) 


国有 用 本 WE 瑞生 mainjs 


window.onload = Funotion ( ) { 

Se 上 Tnterva] ("sty1eChange . bg( ) ", 1*1000) : 一 古 
} 
Yar StyleChange = 

bg : Funoction( ) { 


Yar r = Math.f1oor (Math . random ( ) *256) : 

Yar g = Math.f1oor (Math . random ( ) *256) 

Yar Db = Math.fF1oor (Math . random ( ) *256) : 

Var rgD = "rgDb("+ キ エ + キ "リキ d+ "リキ わ +") ": 
こう "p") [0] .sty1e .backgroundCo1or = = 

Gb: ピー 


} 
} 


台 setinterval()」 で 指定 秒 数 ご と に 実行 する 処理 と ミリ 秒 を 指定 する 
話 最初 の 段落 の 背景 色 を 設定 する 


@7i 滑 9】 軸 個 指定 秒 数 ご と に 処理 を 行う に は 「setlnterval()」 を 使う 


「setInterval()」 を 使え ば 、 指 定 し た 処理 を 指定 秒 数 ご と 呼び 出す こと が で きま す 。 秒 数 は ミリ 秒 で 指定 
する た め 、]1 秒 ご と に 処理 する の で あれ ば 「 1000」 を 指定 し ます 。 「3* 1000」 で あれ ば 3 秒 ご と に 処理 が 
実行 され る こと に な り ま す 。 た だ し 、「setlnterval()」 で 指定 し た 時 間 は 厳密 で は な いた め 、 動 作 時 間 に 関 
し て は 保証 され ませ ん 。 


「setInterval()」 で 設定 し た タイ マー を 解除 する に は 、「clearlnterval()」 を 使い ます 。 「setlnterval()」 
は タイ マー が 設定 され る と 、 タ イマ ーID を 返し ます 。 この タイ マー|ID を 「clearlInterval()」 の パラ メー タ に 
指定 する こと で 、 タ イマ ー を 停止 させ る こと が で きま す 。 た だ し 、 一 度 停止 し て し まっ た タイ マー を 再開 さ 
せる 機能 よ まあ り ま せん (一 時 停止 の 機能 は な い )。 

な お 、 1 回 だ け 処 理 を 呼び 出す に は 、「setTimeout()」 を 使い ます (64 ペ ー ジ 参照 )。 





(WI[iili 明 JavaScript+ ス タイ ル シ ー ト で の カラ ー 指 定 


従来 、JavaScript で ペー ジ の 背景 色 な どの カラ ー を 指定 する 場合 に は 「 カ ラー 名 」 ま た は 「 カ ラー コー 
ド 」 を 使っ て いま し た 。 カラ ー 名 は 「red」 や 「orange」 な どの 色 を 示す 英 単語 で す 。 カラ ー コ ー ド は 


「#rrggbb」 形 式 、 つ まり 「#」 の 後に 16 進 数 で 赤色 、 緑 色 、 青 色 の 明る さ (0 一 255) を 指定 し ます 。 

JavaScript で スタ イル シー ト に アク セス し て 人 色 指定 を 行う 場合 に は 、 こ れ に 加え て スタ イル シー ト で の 
色 指 定 の 形式 を 利用 する こと が で きま す 。 サン プル の よう に 「rgb( 赤 の 輝度 , 緑 の 輝 度 , 青 の 輝 度 )」 や 
「#rgb」 形 式 な ど を 指定 する こと が で きま す 。 
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複数 の JavaScript フ ァイル を 読み 込む 


JavaScript の プロ グラ ムコ ー ド が 書か れ た ファ イル が 複数 ある 場合 に は 、<script> タ グ を 列記 し 
て 読み 込ま せる か 、 後 付け で 読み 込ま せる 方 法 が あり ます 。 l 

その 他 に も 複数 の スク リプ ト フ ァイル を 読み 込ま せる に は 、 少 し 異な る 手法 も あり ます 。 次 の サン 
プル の よう に 「src」 属 性 に 読み 込む び メ イン ファ イル 名 の 後ろ に 「?」 を 記述 し 、 以 後に 「.」( カ ンマ ) で 区 
切っ て 読み 込む ファ イル を 列記 し ます 。 メイ ンプ ログ ラム (main.jsS) で は 、 次 の サン プル の よう に 指 
定 し ます 。 

これ は 最初 に 書か れ た <script> タ グ の 「src」 属 性 の 文字 列 を 読み 込み 、 指 定 さ れ た スク リプ ト フ ァ 
イル を 読み 込ま せま す 。 この 手法 を 利用 すれ ば HTML 文 書 内 に は 1 行 だ け <script> タ グ を 記述 すれ 
ば よい こと に な り 、 メ ン テ ナ ンス 性 も 向上 し ます 。 これ は スタ イル シー ト の 「@import」 で 別 フ ァイル を 
読み 込む の と 似 て いま す 。 





⑮HTML フ ァイル 


< く SC エ 1p 上 上 ype= "上 ex / ]aVaSC エ 1Dp ヒ "Sro="main .JS?Sub1 . Ss, Sub2 . 8 "> 
く / SC エ 1D ヒ > 





⑯JavaSoript フ ァイル (mainJjS) 


NIINH 半 上 委 0 - コ 1dVHO 


(Eunoction () { 
Yar SrocURL, = documen .getE]ementsByTagName ( " SCr1p ヒ 上 " ) [0] .Sroc: 
Wa LoadURTLL = aeURT.。gp1t も ("5 [1] 。ap1i も ("。『) 
For (Var =0: 1<1oadURL . 1ength: ユ ++) { 
documen . W エ 1 ( "<SC エ 1p ヒ Sro='"+1oadURL [1]+"!></ SC エ 1p セ 上 >" ) : 
} 
『 間 生 侯 】 


上 記 の サン プル を 実行 する と 、sub 1 js と sub ら .js が 実行 され ます 。 本 書 の サン プル の 場合 は 、 次 
の よう に アラ ー ト が 表示 され ます 。 
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フォ ー ム の エレ メン ト を 


We 身 御 する 方 法 に つい て 
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男 証 了 め >) 入力 フォ ー ム の 制御 方 法 


入力 フォ ー ム の 制御 (参照 や 設定 ) の 方 法 は いく つか 用意 さ れ て いま す が 、 安 全 性 ・ 確 実 性 を 求め る の で あれ 


ば 従来 通り の 書き 方 を 踏襲 する の が よい で し ょ う 。 


DOM を 利用 する 方 法 で も フォ ー ム の 制御 は 可能 で す が 、 ブ ラウ ザ に よっ て は 期待 通り に 動作 し な い 場 合 が 
ある た め 、 フ ォ ー ム 名 、 エ レ メ ン ト 名 の 「id」 属 性 、「name」 属 性 の 指定 に は 注意 が 必要 で す 。 どちら も 同じ 名 前 
に し て お く の も よい で し ょ う 。 また 、Internet Explorer で は DOM で の 制御 を 行 お うと し た 場合 に 、 正 し く 指 定 
で きず に エラ ー と な っ て し まう エレ メン ト も ある た め 注 意 が 必要 で す 。 


了 y フォ ー ム の 基本 的 な 制御 方 法 

入力 フォ ー ム の 制御 に は 、「forms」 配 列 、 エ レ メ ン ト の 制御 
は 「elements」 配 列 を 使い ます 。 「forms」「elements」 は 連 
想 配 別 で も ある た め 、 配 列 に 参照 番号 また は 「name」 属 性 で 
指定 し た 名 前 を キー と し て 指定 する こと も で きま す 。 配列 の 参 
照 番号 は 、HTML 文 書 内 で の 出現 順に 番号 が 割り 振ら れ ま す 。 


ys ラジ オ ボ タ ン の 制御 

ラジ オ ボ タ ン は 、「name」 属 性 で 同じ 名 前 が 指定 され ます 。 
JavaScript で は これ ら が ラジ オ ボ タ ング ルー プ と し て 扱わ れ 、 
「name」 属 性 を キー と し た ラジ オ ボ タ ン 名 の 配列 と し て 、 各 ラ 
ジオ ボタ ン を 制御 する こと が で きま す 。 


> セレ クト メニ ュー の 制御 
セレ クト メニ ュー の 場合 、「options」 配 列 を 使用 する こと で 
各 項 目 を 制御 する こと が で きま す 。 


b@)6 





Id 事 @@ 当 用 用 目 index.htm 





は 


還 |@ cwavoscrpt-Sa <| な | x 目 uve search 


ュー ザー 登録 


氏名 氏名 を 入力 
住所 : 住所 を 入力 
メー ル ア ド レス : メー ル ア ト レス を 入力 
図 メー ル の 完 ナ 取り を 希望 する 

の 男 


|】 


この ペー ジ を どこ で 知り まし た か ? 
その 他 < 
この サー ビス は 麟 こ どこ で 利用 し ます か ? 





ペー ジ が 読み 込ま れ た と き に 、 各 エレ メン ト 、 
メニ ュー に 値 を 設定 する サン ブル 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 


<htm1 > 
<head> 


<meta h ヒ tp-eqdu1 マ = "ConEen ヒ -type" ConEen キ = "Etex 七 /htm1: 


CharseG ヒ =ut 上 F-8"> 
< モ ュ 上 1e>JaVaSC て 1p 七 Samp1e</ ヒ 1 上 1e> 


<1ink re]="styleshee" type="Eex モ /css" hrefF="main.csS" 。 


media="a11 "> 


く 8C エ 1D ヒ 上 上 ype= "上 Gx ヒ / る マ aSC エ 1 上 " So= "ma1m .S "></ SC て 1 や セテ 


</head> 


の 


< くわ body テ > 
<h1> ユ ー ザ ー 登 録 </h1> 
<Form ac 上 1on=" ./cheock . cg1i" method= "ge 上 " 1d="mainForm" =- 
name= "ma1nForm"> て 
氏名 :<1nput type="text" name=" 上 F1qd1 "><b ェ > 
住所 :<1npu 上 ype= "上 ex 上 " name=" 上 F1d2">< わ エッ > 
メー ル ア ド レス :<1npu 上 上 ype=" モ ex 上 " name=" 二 下 1d3" 1d=" 上 FE1d3 ">< わ エッ > 
<1npu type= "oheockbox" name= "cb"> メ ー ル の 受け 取り を 希望 する <b エ > 
<1npu 上 ype="radio" name= "rd"> 男 < わ ェ > 
<1npu type="radio" name=" エ dQ"> 女 < わ エ > 
この ペー ジ を どこ で 知り まし た か ?<b エ > 
<Se1ec 1d="se11" name="Se11"> 
<option Ya]ue= "1tem1 ">Web</ op1on> 
<option Ya]ue="1tem2" name="second "> その 他 </option> 
< く / Se1 ら GC ヒ ><D エ > 
この サー ビス は 主 に どこ で 利用 し ます か ?<b ェ > 
<Se1ec ヒ 上 1d="se12" name="Se12" mu1] ヒ ip1e> 
<option Ya1ue= "item1 "> 会 社 </ op 上 1on> 
<option Va1ue="1Eem2『> 目 宅 </ op 上 ion> 
<option Ya]ue=" ュ 1Eem3 "> その 他 </ option> 
</ Se1eo ヒ > 
< く / Form> 
</body> 
</htm1> 


) 





の)9」@ 


厨 Se 要 邊 用 本 EER 瑞生 mainjjs 


window .on1oad = fFunotion ( ) { 
document . Forms[0] .e1ements[0] .value = "氏名 を 入力 " : 一 名 
documen . Forms [ "mainForm"] .e1ements [ "上 F1qd2" ] . マ alue = "住所 を 入力 " : 一 略 
document . getE1emenEByTd ( "上 E1d3" ) .Ya1ue = "メー ル ア ド レス な 入力 " : 一 回 
document .mainForm.cb.cheocked = true: 一 猫 
document .ma1nForm .rd[1] .checked = true: 一 話 
document . Forms [ "mainForm" ] [ "se11"] .options [1] .se1ected = true: 一 話 
document . Forms [ "mainForm" ] [ "se12"] .options [1] .selected = true: 一 上 


トー 


…「forms」 配 列 と 「elements」 配 列 を 使っ て 制御 する 基本 パタ ー ン 
…「forms」「elements」 は 連想 配列 (ハッ シュ ) で も 制御 する こと が で きる 

… 特 定 の ID 名 を 持つ エレ メン ト を 直接 指定 する 場合 は 「document.getElementByld()」 を 使用 する 
…「name」 属 性 で 指定 し た 名 前 を 「.」( ド ッ ト ) で 区 切っ て 指定 する こと も で きる 

… ラ ジオ ボタ ン の 場合 は 「name」 属 性 で 指定 し た グル ー プ 配列 と し て 制御 する 

… セ レク トメ ニュ ー の 場合 は 「options」 配 列 を 使っ て 各 項 目 を 制御 する 

セレ クト メニュー の 場合 、 複 数 選択 で きる メニ ュー の 場合 で も 、 同 様 に 「options」 配 列 を 使っ て 制御 する 








回 回 回 回 回 回 回 


テー 眼 0 -3 ヨ 1dVHO 














SR ゴ esakeN 咽 昌 | [ICHAprEos* |]o2z 
02Z ペー ジ が 読み 込ま れ た ら 指 定 し た 





テキ スト フィ ー ル ド に フォ ー カ ス を 移す 














テー ふ AN 上 0- ヨ 1dVHO 








ここ で は 、 ペ ー ジ の 読み 込み 時 に 、 指 定 し た テキ スト フィ ー ル ド に フォ ー カ ス を 移す 方 法 に つい て 解説 し ます 。 









(る. |@ cwavascrpt-sal | | x | | uive search 


宮 区 旨 JaveSorpt Sample | | 信 ・ 回 ・ 下 ・ 















ペー ジ が 表示 され る と 、 指 
定 し た テキ スト フィ ー ル ド 
に フォ ー カ ス が 移動 する 








画 コン ピュ ー タ | 保護 モー ド : 無効 





SeXemee 可 当 目 用 用 馬 同 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 

<meta hD-@Gqdu1 マ = "COnE@Gn ヒ 上 ype" Conten ヒ = "上 ex 上 /htm1] : 
Charse キ =utF-8"> 
< 上 1 上 1e>JavaSorip 上 Samp1e</ ヒ 1 ヒ ]e> 
<1ink re]="sty1esheet" type="tex 上 /css" hrefF="main.Csg" 
media="a11 "> 
< く SCr1p 上 上 ype= "上 ex 七 / aVaSC エ 1D ヒ 上 " 8 エ o= "ma1n . 5 "></ SC エ 1D ヒ > 


</head> 
<bod ツ > 
<h1>TD と パス ワー ド を 入力 し て ログ イン し て くだ さい 。 </h1> 
<fForm ac1on=" ./check .Cg1i" method= "ge 上 " name="ma1inForm"> 


TD:<1npu type=" 上 ex 七 " name="uS ら erTD" 1d= "userTD"><b エ > 一 入 
PW:<1npu 上 ype= "上 ex ヒ 上 " name="uSeGrPW" 1d= "u5SerPW ">< わ エッ > 
<1npu 上 tyDpe="button" 1d="1og1nButEon" Ya1ue= "ログ イン "> 
< く / Form> 
</ わ odY> 
</htm1> 





豆 フォー カス し た い エ レ メ ン ト に ID 名 を 指定 する 





いら)9I@: 





gm 雪上 旧 用 EE 還 本 mainjs 


window.on1oad = fFunoction( ) { 
document . getE1ementByTd ( "userTD" ) . Eocus ( ) : 一 加 
} 


豆 focus)」 を 使っ て 指定 し た エレ メン ト に フォ ー カ ス を 移す 


(@ 可 抽 】 衣 フォー カス する に は [focus()」 を 使う 


ペー ジ 上 の 特定 の エレ メン ト に フォ ー カ ス を 移す に は 、「focus()」 を 使い ます 。 ペー ジ が 読み 込ま れ た 
ら 特 定 の テキ スト フィ ー ル ド に フォ ー カ ス す る に は 、「window.onload」 イ ベン ト が 発生 し た 際 に フォ ー カ ス 
処理 を 行う よう に し ます 。 サン プル で は ID 名 が userlID の テキ スト フィ ー ル ド に フォ ー カ ス す る よう に し て い 
ます 。 


WWiilW フォ ー カ ス を 外す 
フォ ー ム の テキ スト フィ ー ル ド に フォ ー カ ス さ れ た 状態 か ら フ ォ ー カ ス を 外す に は 、「blur()」 を 使い ます 。 
サン プル の 場合 は 、 次 の よう に 「focus()」 の 代わ り に 「blurO」 を 指定 し ます 。 


document . detE1ementByTd ("userTD" ) .b1ur ( ) : 


(@[jjii テキ スト フィ ー ル ド の 内 容 を 選択 する 


ペー ジ が 読み 込ま れ た ら テ キス ト フ ィ ー ル ド の 内 容 を 選択 する に は 、「focus()」 と 「select)」 を 組み 合 
わせ ます 。 次 の よう に 最初 に フォ ー カ ス し 、 そ の 後に 選択 する よう に し ます 。 


window.on1oad = Funoction( ) { 
document . detE1ementByTqd ( "userTD" ) .Eocus( ) : 
document .getE]ementByTdq ( "userTD" ) . Se1ec( ) : 
} 


人 や 今 ) 。 | 2@ c:*sample2winde 


-w--| sgwtsme | 一 | 





ペー ジ が 表示 され る と 、 指 
定 し た テキ スト フィ ー ル ド 
の 内 容 が 選択 され る 





二 コン ピュ ー タ | 保護 モー ド : 無効 











テー へ LN 目 0 -4 ヨ IdYHO 













手間 記 表 叫 則 CHAPTER-03 P 028 


テキ スト フィ ー ル ド の 内 容 を 
2 チェ ッ ク す る 


ここ で は 、 テ キス ト フ ィ ー ル ド の 内 容 を 調べ 、 特 定 の 文字 列 と 内 容 が 一 致す る か を チェ ッ ク す る 方 法 に つい て 








_ @|D が 間違っ て いる 場合 














ID が 間違っ て いま す 











商 コン ピュ ー タ | 保護 モー ド : 無効 


テー ふい | 眼 0 - 紀 1dVHO 








ID を 入力 し て ボタ ン を クリ ッ 
ク す る と 、 入 力 さ れ た ID が 正 
し いか どう か 判断 する 











easee 当 目 用 | index.htm 


<!DOCTYPBE htm1 PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 

<me ヒ a h ヒ 上 上 わ ー@Gqdu1 マ = "で ConEen ヒ tyDe" ConEen セ = " モ ex 七 /htm1: 
Cha エ SeG ヒ =u 上 F-8"> 
< モ ュ 1 上] e>JavaSo て ip ヒ Samp]e</ 七 1 上 1e> 
<11imk re1="sty1eshee" type="Eext/css" hreF="main.css" = 
med1ia="a11 "> 0 の 





り く 8C エ ュ p 七 上 ype= "上 G 上 / る aaSC エ エモ" 5 エ o= "ma1n . 5 "></ SC エ エロ ヒ > 
</heaqd> 
<body テ > 
<h1>TD の 確認 </h1> 
<fForm action=" ./cheock . Cg1" method="get" name="mainForm"> 
TD:<1npu ヒ 上 ype= "上 ex 上 " name="uS ら FTD" 1d="u5eG エ TD">< セ > 一 年 
<1npu type= "button" 1q="checkBuEon" Ya1ue=" TD を チェ ッ ク "> 
</ Form> 
</body> 
</htm1> 


頭 内 容 を チェ ッ ク し た い エ レ メ ン ト に ID 名 を 指定 する 


ElI 上 main.js 


window.on1oad = fFunoction( ) { 
document .getE1ementByTdq ( "checkBuEton" ) .onc1ick = Funotion( ) { 
Ya uTD = document .getE1ementByTd ( "userTD" ) .va1ue : 一 視 





@19X@S 宮 9@) り ) 


て お WEDD' 三 So 
a1er ( " TD が 間違っ て いま す " ) : 
)elset 


a1er モ ( "この TD で ログ イン し ます " ) : 
} 


頭 | 名 が 「userlD」 の テキ スト フィ ー ル ド の 内 容 を 読み 出す 
話 読み 出し た 内 容 が 「cr」 の 文字 か どう か 調べ メッ セー ジ を 表示 する 


⑲ 加 提唱 前 | value」 プ ロバ ティ で テキ スト フィ ー ル ド や エレ メン ト の 内 容 を 読み 出し チェ ッ ク す る 


テキ スト フィ ー ル ド に 入力 され た 内 容 を チェ ッ ク す る に は 、「value」 プ ロ パ ティ で 内 容 を 読み 出し 、「if」 ま 
た は 「switch」 な ど で 判 断 を 行い ます 。 サン プル で は 入力 され た 文字 が 「cr」 か どう か 調べ て 処理 を 分 け て 
いま す 。 

単純 に 空欄 か どう か 調べ る 場合 に は 、 次 の よう に 否定 演算 子 「!」 を 使っ て 判断 し ます 。 


すま (4QEBY 6 

a1er ( "空欄 で す " ) : 
})else{t 

a1er ( " 文字 が 入力 され て いま す " ) : 
} 


空欄 が 複数 ある 場合 も 同様 で す が 、prototype.js ラ イブ ラリ を 使用 する と 手軽 に 空欄 チェ ッ ク を 行う こ 
と が で きま す (46 ペ ー ジ 参照 ) 。 








テー 眼 E0-d ヨ 1dYHO 










テー ふり 上 0-3 ヨ 1dVHO 








sEcTIoN | 調 


029 テキ スト フィ ー ル ド に 数 字 以 外 が 
入力 され て いる か 調べ る 





ここ で は 、 テ キス ト フ ィ ー ル ド の 内 容 を 調べ 、 そ の 内 容 に 数 字 以 外 が 入力 され て いる か チェ ッ ク す る 方 法 に つ 
いて 解説 し ます 。 













つ C @ Cascrpt sa ・ ゥ | x ue seara 


辻 補 | avascmptsample トー ト 合 ・ 回 ・ ーー 







パ 


作 半角 の 数 字 だ け 入力 し て くだ さい 





出荷 状況 の 確認 


伝票 番号 : s0123 (半角 の 数 字 の み 入力 可 ) 


3 





入力 され た 文字 が 0 一 の 数 字 で な 
い 場 合 に ボタ ン を クリ ッ ク す る と 、 
アラ ー ト ダイ アロ グ が 表示 され る 





商 コン ピ ユ ー タ | 保護 モー ド : 無効 








Se7WXe 事 eg 当 目 用 用 台大 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 

<meta htp-equ1 マ = "ConEen ヒ -type" Conten ヒ =" モ ex モ /htm1 : 

CharSe ヒ =utF-8"> 

< 上 it 上 1e>JavaScrip Samp1e< / 上 1 上 1]e> 

<11nk re1="styleshee" type="Eex 七 /css" hreF="main.Css" 

media="a]1 "> 

く SC エ 1D ヒ 上 上 YDe= "ヒヒ / る で aSC エ 1 わ 七 " 5 エ C="matn . 8"></ SC エ 1D ヒ > 


</head> 
<body> 
<h1 > 出荷 状況 の 確認 </h1> 
<Form action=" ./check . Cg1" method= "ge 上 " name="mainEForm"> 


伝票 番号 :<1nput type="Eex ヒ 上 " name="qNumber" 
1d="qNumber"> (半角 の 数 字 の み 入 力 可 ) <b エ > a 
く 1npu 上 上 ype="button" 1d="checkBuEton" Ya1ue= "チェ ッ ク "> 
</ Form> 
</body> 
</htm1> 


豆 内 容 を チェ ッ ク し た い エ レ メ ン ト に ID 名 を 指定 する 





Reieee 当 目 上 | 本 本 湖 main.js 
window.on1oad = Funotion( ) { 
document . getE1emenEtByTdq ( " checkBuEtton" ) .onc1ick = Funotion ( ) { 
var ex = document .getE1emenEtByTd ( "qNumber" ) .Ya1ue : 一 名 
Ya reSu1] = ex .matoh ( / [^0-91 / ) : 一 鍵 
if (!Eext | | resu1t) { 
a1 er ( "半角 の 数 字 だ け 入 力 し て くだ さい " ) : 
documen . detE1 ementByTdq ( "Number" ) . Focus ( ) : 
documen . getE1emenEByTd ( "qNumber" ) . se1ec 七 ( ) : 
} 


こつ 


…ID 名 が 「qNumberl の テキ スト フィ ー ル ド の 内 容 を 読み 出す 
… 読 み 出 し た 内 容 を 正規 表現 を 使っ て 数 値 以外 が 含ま れる か どう か 調べ る 


… テ キス ト フ ィ ー ル ド が 空欄 また は 数 字 以外 が 入力 され て いる 場合 に アラ ー ト ダイ アロ グ を 表示 し 、 フ ォ ー カ ス を テキ スト 
フィ ー ル ド に 移す 





(@ 拓 前 租 数 値 か どう か の チェ ッ ク は 正規 表現 を 使う 


テキ スト フィ ー ル ド に 入力 され た デー タ か が 数値 か どう か を 調べ る に は 、 正 規 表現 を 使い ます 。 JavaScript 
で は 「matchO」 で 正規 表現 の 文字 列 を 指定 する こと が で き 、 結 果 が 配列 で 返 ぐ れ ま す 。 も し 、 何 も マッ チ し 


な か っ た 場合 に は 、「matchO」 は 「null」 を 返し ます 。 

数 値 か どう か 調べ る 場合 に は マッ チ す る 条件 を 数 値 に マッ チ で は な く 、 数 値 以 外 に マッ チ す る よう に 指定 
し ます 。 数 値 以 外 に マッ チ さ せる た め の 正 規 表現 指定 は 「match(/[^0-9]/) と な り ま す 。 「^] は 、「 一 以外 」 
と いう 意味 に な り ま す 。 「[^0-9]」 と する と 、0 か ら 9 以 外 に マッ チ す る こと に な り ま す 。 





(WI[iillW ペー ジ 内 容 を 印刷 する 


JavaSoript で は 「print(〈)」 メ ソ ッ ド が 用 意 さ れ て お り 、 任 意 の ウィ ンド ウ を 印刷 する こと が で きま す 。 次 
の サン ブル は ID 名 「printButton] の ボタ ン が クリ ッ ク さ れ た ら 現 在 の ウィ ンド ウ の 内 容 を 印刷 する プロ グ 
0098 


window.on1oad = funotion ( ) { 
document . getE1 emenByTq ( "D エ inEBu 上 ton" ) .onc1iok = Funotion( ) ( 
w1ndow .D エ in ( ) : 
} 
} 


印刷 前 に は 「onbeforeprint」 イ ベン ト と 「onafterprint」 イ ベン ト が 発生 し ます 。 印刷 デー タ 生 成 前 に 
「onbeforeprint」 が 発生 する の で 、 表 示し た く な い エ レ メ ン ト や テキ スト を 非 表示 に し 、 印 刷 デ ー タ 生成 後 
に 発生 する 「onafterprint] イ ベン ト で 元 の 状態 に 復帰 させ る よう な 処理 を 行う こと が で きま す 。 





テー\N| 委 EO-3 ヨ 1dVHO 
















SiESENI 上 ICOIN 旨 [LcHApreos | | josol 
61 テキ スト フィ ー ル ド に 英文 字 以外 が 
入力 され て いる か 調べ る 











ここ で は 、 テ キス ト フ ィ ー ル ド の 内 容 を 調べ 、 そ の 内 容 に 英文 字 以外 が 入力 され て いる か チェ ッ ク す る 方 法 に 
ーー つい て 解説 し ます 。 








(99ErocorcPPEITE つ 1 
次 人 |@wsotsampe | | 食 ・ 回 -・ で < 








キー の 確認 





キー: 123 
( 半 角 の 英字 の み 入力 可 ) 


EZ 入力 され た 文字 が 英文 字 で な い 
場合 に ボタ ン を クリ ッ ク す る と 


アラ ー ト ダイ アロ グ を 表示 する 











- コン ピュ ー タ | 保護 モー ド : 無効 





テー ふい 眼 0-3 ヨ 1dVHO 


SeiWee@ 要 目 用 | 上 馬 軸 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL. 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta htD-eqdu1 マ = "Conten-t 上 ype" Conten ヒ = "tex 上 /htm1 : 
CharSe ヒ =utFfF-8"> 
< ヒュ 1 上 1e>JavaSc エ ip Samp1e</ ヒ 1 上 1e> 
<1ink re]="sty1esheet" type=" も ex 七 /css" hrefF="main.Css" 
media="a11 "> 
ぐ く SC エ 1p 上 上 ype= "ヒヒ / る で aSC エ 1D 上 "SoC= "main . 8S "></ SC エ 1p ヒ > 
</head> 
<body> 
<h1> キ ー の 確認 </h1> 
<Form acC ヒ 1on=" ./check .Cdg1" method= "de" name="mainForm"> 
キー:<input type= "tex 上 " name="qCode" 1q="qCode "><br> 一 久 
(半角 の 英字 の み 入 力 可 ) <b ェ > 
く 1npu 上 ype= "buEon" 1d="checkBuEton" ya1ue= "チエ ェ エック"> 
< く / FoO エ m> 
</body> 
</htm1> 





頭 内 容 を チェ ッ ク し た い エ レ メ ン ト に ID 名 を 指定 する 





elWXeseg 当 目 用 用 本 RS 間 衣 多 main.js 


w1ndow.on1oad = funotion( ) { 
document . getE] ementByTdq ( "CheckBu モ Eon " ) .onc1iock = Funotion ( ) { 
Yar ex 上 = qdocument .getE1emen モ By エ Td ( "qCode" ) .va1ue: 一 名 
Ya reSu] 上 = ex .maoh ( / [ ^a-Z] / ュ ) : 一 許 
tf (!text | | resu1t) { 
a1ert ( "a 一 z の 英文 字 だ け 入 力 し て くだ さい " ) : 
document .getE1ementByTd ( "qCode" ) . Focus ( ) : 
document . getE1ementByTqd ( "qCode" ) . se1ec() : 
} 


トー 


"ID 名 が 「qCode」 の テキ スト フィ ー ル ド の 内 容 を 読み 出す 

… 読 み 出 し た 内 容 を 正規 表現 を 使っ て 英 大 文字 、 英 小文字 以外 が 含ま れる か どう か 調べ る 

… テ キス ト フ ィ ー ル ド が 空欄 また は 英字 以外 が 入力 され て いる 場合 に アラ ー ト ダイ アロ グ を 表示 し 、 フ ォ ー カ ス を テキ ス 
ト フ ィ ー ル ド に 移す 





回 回 回 





⑲ 頂 】 映 個 天文 字 か どう か の チェ ッ ク は 正規 表現 を 使う 
テキ スト フィ ー ル ド に 入力 され た デー タ が 英文 字 か どう か を 調べ る に は 、 正 規 表現 を 使い ます 。 
JavaScript で は 「match()」 で 正規 表現 の 文字 列 を 指定 する こと が で き 、 結 果 が 配列 で 返 べ ぐれ ます 。 も し 、 
何 も マ ッ チ し な か っ た 場合 に は 、「match()」 は 「nulll」 を 返し ます 。 
英文 字 か どう か 調べ る 場合 に は マッ チ す る 条件 を 英文 字 に マッ チ で は な さく 、 英 文字 以外 に マッ チ す る よ 


うに 指定 し ます 。 英文 字 以 外 に マッ チ さ せる た め の 正 規 表現 指定 は 、「match(/ [へ ^a-z]/) と な り ま す 。 「^] 
は 「 一 以外 」 と いう 意味 に な り ま す 。 「[^a-z] 」 と する と 、 英 文字 の a か ら z 以 外 に マッ チ す る こと に な り ま す 。 

また 、 英 文字 の 場合 、 小 文字 と 大 文字 が あり これ ら を 区 別 せ ず に チェ ッ ク し た い 場 合 に は 、 和 ii] オプ ショ ン 
(ignore) を 指定 し ます 。 これ は 、「match(/[ へ a-z]/i)」 の よう に 記述 し ます 。 





(@[iil 明 無限 ルー ブ プ や 一定 時 間 内 に 処理 が 終わ ら な い 場 合 


作成 し た プロ グラ ム に よっ て は 条件 判断 の 間違い で 処理 が 終わ ら な く な っ て し まっ た り 、 ア ル ゴ リ ズム が 
悪く て 処理 に 時 間 が か か っ て し まう 場合 が あり ます 。 古い ブラ ウザ で は 強制 終了 する と いっ た 方 法 が と られ 
て いま し た が 、 現 在 利用 され て いる 多く の ブラ ウザ で は 一 定時 間 内 に 処理 が 終わ ら な いと 警告 が 表示 され 
る よう に な っ て いま す 。 

警告 画面 


樹 告 : 応答 の な い ス クリ プ ト 
\ き この ペー ジ の スク リプ ト は 処理 に 時 間 が か か っ て いる か 応答 


し な く な っ て いま す 。 今 すぐ スク リプ ト を 停止 する か 、 ス ク 
リプ ト を デバ ッ ガ で 開く か 、 こ の まま 処理 を 続行 させ る か 選 
択 し て くだ さい 。 


スク リプ ト を デバ ッ グ 処理 を 続行 ) 全 共 み サ プ ド を 停 中 








ー ふ | 眼 EO-d ヨ 1dVHO 











テー 上 0 -3 ヨ 1dYHO 








SG EK の IN 則 [」cHAprEeos kl IO31 


03] テキ スト フィ ー ル ド の 内 容 が 間違っ て 
いる 場合 一 瞬 だ け ハ イラ イト させ る 








ここ で は 、 テ キス ト フ ィ ー ル ド の 内 容 を 調べ 、 そ の 内 容 が 特定 の 文字 列 と 一 致し な い 場 合 に 、Script.aculo.us 
ライ ブラ リ を 使っ て 一 瞬 だ け ハ イラ イト させ る 方 法 に つい て 解説 し ます 。 














つつ @ Cavsorprse ・ ヶ | x uive search 


さぶ の 。| 9masosamre | の 




























ロン ピュ ユー タ | 保護 モー ド : 無効 


テキ スト フィ ー ル ド に ID 名 を 入力 し 、 
ボタ ン を クリ ッ ク す る と … 


ID が 正しく な い 場合 に 
テキ スト フィ ー ル ド が 
ハイ ライ ト 表 示さ れる 








天 コン ビ ピュータ | 保護 モー ド : 無効 





Seelwe 当 目 用 | 怠 語 際 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01 Transiiona] / /EN"> 
<htm1 > 
<head> 
<meta h 上 上 p-equ1Y=" ConenE-type" 
ConEen キ = "上 ex 七 /htm1] : CharSe ヒ =utF-8『"> 
< ヒュ 1 ヒ 上 1]e>JavaSoCr1p 上 Samp1e</ ヒ 1 ヒ ]e> 
<11ink re1="sty1eshee" type="tex 七 /css" hrefF="main.Css" 
media="a11 "> 
し tyDe= "上 ex / ]aVaSC エ 1D 上 " SC= "や ootyDe . ]S "></ SC エ 1 や セキ > 
く SC エ 1Dp 上 yDe= "ヒヒ / aVaSC エ 1 上" SC= "SCr1ptaou1]ousS . 8 "></ SC エエ 1D ヒ > 


ーー で 8 ご C エ 1D 上 上 ype= "ヒヒ / aaSC エ エ ユヒ " 5S エ C= "mainm . 8 "></ SC エエ ヒ > 
</head> 
< くわ body> 
<h1>TD の 確認 </h1> 
<Form aoCion=" ./cheockk . Cd91" method= "ge 上 " name="mainForm"> 
TD:<1nmpu 上 上 ype= " 上 ex 七 " name="uSe エ TD" 1d="uSe エ T エ D"><b ェ > 一 臣 
<1npu 上 type="button" 1d="ocheckBuEonm" Ya1ue="TD を チェ ッ ク "> に ーー 
</ Form> 
</ body> 
</htm1> 


頭 prototypejs ラ イブ ラリ と script.aculo.us ラ イブ ラリ を 読み 込む 
放 内 容 を チェ ッ ク し た い エ レ メ ン ト に ID 名 を 指定 する 


SOURCE CO 





還 直 目 用 | main.jS 


window.on1oad = Funotion( ) { 
document . getE1ementByTd ( "checjkButon" ) .onc1ick = funot1on ( ) { 
Yar uTD = document .getE1ementByTd ( "userTD" ) .va1ue : 一 騙 
F (uTD != "cr"){( 一 話 
new EfFfFect .High11ight ( "userTD" ) : 一 話 
})e1set 
a1er ( "正しい TD が 入力 され まし た " ) : 
} 





テー 眼 EO0- ヨ ldVHO 


頭 | 名 が 「userlD」 の テキ スト フィ ー ル ド の 内 容 を 読み 出す 
許 入力 され た ID の 文字 を 調べ る 
医 正しく な い 場 合 に は テキ スト フィ ー ル ド を ハイ ライ ト す る 





@⑯ 損 9】 画 | Effect.Highlight()」 で ハイ ライ ト さ せる 


テキ スト フィ ー ル ド に 入力 され た デー タ が 不正 な 場合 や 空欄 の 場合 に 、 テ キス ト フ ィ ー ル ド を バハ イラ イト 
表示 させ る に は 、script.aculo.us ラ イブ ラリ を 使う と 便利 で す 。 script.aculo.us ラ イブ ラリ は 


prototype.JS ラ イブ ラリ に 依存 し て いる の で 、 両 方 の ライ ブラ リ を 読み 込ま せま す 。 
人 ハイ ライ ト 表 示す る に は 、「Effect.Highlight() 」 の パラ メー タ に ハイ ライ ト 表 示さ せ た い テキ スト フィ ー 
ルド の ID 名 また は オブ ジェ クト を 指定 する だ け で す 。 後 は 、 自 動 的 に ライ ブラ リ が 処理 を 行っ て くれ ます 。 










テー 上 EO-3 ヨ 1dYHO 





62 | 


S 下 2 で IG ll CHAPTER-03 と 032 


パス ワー ド が 間違っ て いる 場合 に 
WE た 大 に 振ら す 


ここ で は 、 テ キス ト フ ィ ー ル ド の 内 容 を 調べ 、 そ の 内 容 が 特定 の 文字 列 と 一 致し な い 場 合 に 、script.aculo.us 
ライ ブラ リ を 使っ て ウィ ンド ウ を 左右 に 揺らす 方 法 に つい て 解説 し ます 。 















避 。) | @ Cavascrpt-Sa < | な | x 上 u 














| パス ワー ド の 確認 


PW: ゃ ee 











、 末 ンピュータ | 保護 モー ド : 無効 
テキ スト フィ ー ル ド に パス ワー ド を 
入力 し て ボタ ン を クリ ッ ク す る と … 





パス ワー ド が 正しく な 
い 場 合 に 入力 フォ ー ム 
全体 が 左右 に 揺れ る 





の 9(@ ヨ 





@ 当 目 用 貼 誠 際 index.htm 


<!DOCTYPBE htm1] PUBLTC "-//W3C//DTD HTMTL, 4.01 Trans1 モ 1ona1 / /EN"> 
<htm1 > 
<head> 
<meta htp-equ1 マ = "ConEen ヒ 上 ype" 
で Conten ヒ =" 七 @x 七 /htm1] : CharSeG ヒ =utE-8"> 
< ヒュ 1 上 1e>JaVaSoCr1p 七 Samp1e</ ヒ 1 上 1e> 
<1ink re1]="styleshee" ype="EexE/css" hrefF="main.css" 
media="a11"> 
し tyDpe= "上 ex / J る VaSC エ 1D " Sro= "pootyDe . ]S "></ SC エ 1D ヒ > 
で SC エ 1Dp ヒ 上 上 yDe= "上 Gx 上 / る び aSC エ 1D " S エ C= "SC エ 1ptaou1 ous . 8 "></ SC エ 1D ヒ > 


< く SC エ 1p ヒ ype=" ヒ ex / aaSC エ ip 上 " 8 エ o="maim .S"></ SC て 1D ヒ > 
</head> 


< くわ body> 
<h1> パ スワ ー ド の 確認 </h1> 
<fForm action=" ./cheok . Cg1" method= "ge 上 " 1d="mainForm'" = 
name= "matnForm"> * 
PW:<1npu type= "paSsSword" name="pwd" 1d="pwd"><b エ > 一 衣 
<1npu type="button" 1q="ohecjkButton" Va1ue=" PW を チェ ッ ク "> 
</ form> 
</body> 
</htm1 > 


副 prototype.js ラ イブ ラリ と socript.aculo.us ラ イブ ラリ を 読み 込む 
話 内 容 を チェ ッ ク し た い エ レ メ ン ト に ID 名 を 指定 する 





Sealee 当 目 用 本 本 請 main.js 


window.on1oad = Funotion( ) { 
document . getE1emenEBy エ Td ( "checjkButon" ) .onc1iok = fFunot1on( ) { 
Var Pw = document .getE1emenByTq ( "pwd" ) .va1ue: 一 名 
1f (pw != "or"){ 一 略 
new EFFect . Shake ( "mainForm'" ) : 一 回 
})elset 
a1ert ( "正しい パス ワー ド が 入力 され まし た " ) : 
} 


頭 |D 名 が 「pwd」 の テキ スト フィ ー ル ド の 内 容 を 読み 出す 
許 入力 され た 文字 列 ( パ スワ ー ド ) を 調べ る 
橋 正しく な い 場 合 に は 入力 フォ ー ム 全体 を 左右 に 揺らす 


(@7i3g】 還 人 Effect.Shake()」 で 入力 エリ ア を 揺らす 


パス ワー ド が 間違っ て 入力 され た 場合 に 入力 フォ ー ム を 左右 に 揺らし て 間違い だ と 知ら せる に は 、 
8Cript.aculo.us ラ イブ ラリ を 使う と 便利 で す 。 script.aculo._us ラ イブ ラリ は prototype.jS ラ イブ ラリ に 


依存 し て いる の で 、 両 方 の ライ ブラ リ を 読み 込ま せま す 。 
入力 フォ ー ム を 左右 に 揺らす に は 、「Effect.Shake()」 の パラ メー タ に 揺らし た い 入 力 フ ォ ー ム の ID 名 
また は オブ ジェ クト を 指定 する だ け で す 。 後 は 、 自 動 的 に ライ ブラ リ が 処理 を 行っ て くれ ます 。 











テー 眼 E0 dd1dVHO 









テー ふり 削 EO-d ヨ 1dVHO 











CHAPTER-03 p 033 
数 値 以 外 が 入力 され た ら 
メッ セー ジ を 表示 する 








ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、 数 値 以 外 が 入力 され た ら メ ッ セ ー ジ を 表示 する 方 法 に つ 
いて 解説 し ます 。 









に ーー に に | 還 
一 [=] に 3 





3 













テキ スト フィ ー ル ド に 数 値 以外 の 
文字 が 入力 され る と 、 メ ッ セ ー ジ 
が 表示 され る 





























ーー 


SeWRee 可 当 目 有用 馬 M 商 了 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 

<meta h ヒ Ep-equi マ = " Conten ヒ 上 ype" ConEen セ =" 上 ex 上 /htm] : 
CharSeG ヒ =uF-8"> 
< ヒュ 1 上 1e>JaVaSCr1p 七 Samp1e< / 上 1 上 1e> 
<1ink re1="sty1eshee" hrefF="SpryVa1iqdationTextF1e1d.css" 回 
type=" tex 七 /css" media="a11 "> 
<1ink re]="styleshee" ype="Eex 上 /css" hrefF="main.css" 
media="a11"> の 


の 


< く 5C エ 1p ヒ sro="SpryVa11qdationTextFie1d.S" *。 
tyDe= "上 @x 七 / る VaSC エ 1D 上 "></ SC エ ュ エロ キモ > 2 回 
で く SC エ 1D 上 上 YDe= "上 xx / aaSC エ 1D ヒ "SC="ma1in .S"></ SC エ 1p セ > 
</head> 
< く Dody> 
<Form acCtion=" ./cheok . Cg1" method= "get" 1d="mainForm" = 
name= "ma1nForm"> 
<Span 1q= "checkData1 "> 
く 1npu 上 yDe= "上 Gex 上 " name= "上 ex 七 1" 1d="E 上 ex 上 1 "> 
<span cl]ass= "textFie1qdRequiredMsg "> 数 値 を 入力 し て くだ さい </ span> 
<Span Class= "上 ext 上 Fie1dTnya11qFormatMsd"> “*- 
数 値 以外 は 受け 付け ませ ん </ span> 
</ SDan> 
くわ エ > 
<1npu type="Submi モ " Ya1ue=" 送 信 "> 
</ Form> 
</body テ > 
</htm1> 


頭 Adobe Spry フ レー ム ワ ー ク で 使用 する スタ イル シー ト フ ァイル を 読み 込む 
話 Adobe Spry フ レー ム ワ ー ク を 読み 込む 





ee ヨ mse ョ 当 目 用 | 本 交 main.js 


w1ndow.on1oad = Funoction() { 
new Spry .Widget .Va1idationTextFie1d ("checkData1", "rea1", |m 
{va1idateOn : [ "b1ur" , "change"] } ) : 

} 





一 |D 名 が 「checkData 1 」 で 囲ま れ た 範囲 - あ る テキ スト フィ ー ル ド の 内 容 を チェ ッ ク す る よう に 設定 する 

















(@7i 間 9】 信 炒 合 か どう か チェ ッ ク を 行う に は 「Spry.Widget.ValidationTextField()」 で 「reall を 指定 する 


リア ル タ イ ム に 入力 され た 内 容 が 数 値 か どう か を 調べ る に は 、Adobe Spry フ レー ム ワ ー ク を 利用 する 
と 簡単 で す 。 テキ スト フィ ー ル ド の チェ ッ ク を 行う SpryValidationTextFieldjS フ ァイル と 関連 する スタ イ 
ル シ ー ト ファ イル (SpryValidationTextField.Css) を 読み 込み ます 。 チェ ッ ク し た い テ キス ト フ ィ ー ル ド を 
<SDan ロ > タグ で 囲み ID 名 を 指定 し て お きま す 。 さら に 入力 時 に 表示 する メッ セー ジ を <span> タ グ で 囲み 、 
スタ イル シー ト の クラ ス 名 を 「textfieldRHequiredMsg] に し ます 。 入力 内 容 が 不正 だ っ た 場合 の メッ セー 
ジ も 同様 に <Span> タ グ で 囲み 、 ス タイ ル シ ー ト クラ ス 名 を 「textfieldInvalidFormatMsg」] に し ます 。 








HTML 文 書 の 設定 が 終わ っ た ら ス クリ プ ト で チェ ッ ク す る 対象 と な る テキ スト フィ ー ル ド を 「Spry. 
Widget.ValidationTextField()」 で 指定 し ます 。 パラ メー タ に は チェ ッ ク す る 領域 を 示す ID 名 、 チ ェ ッ ク 
する 種類 、 い つ チ ェ ッ ク す る か な どの オプ ショ ン を 指定 し ます 。 数 値 か どう か を チェ ッ ク す る 場合 に は 2 番 
目 の パ ラメ ー タ に 「reall の 文字 を 指定 し ます 。 これ で リア ル タ イ ム に 数 値 か どう か の 入力 チェ ッ ク が 人 行わ 
れ ま す 。 な お 、「reall の 代わ り に 「integer」 を 指定 する と 、 整 数 か どう か の 入力 チェ ッ ク が 行わ れ ま す 。 














テー ふい | 眼 EO- ヨ IdVHO 











テー 眼 0-d ヨ 1dVHO 


sECTION | 議 


金額 以外 が 入力 され た ら 
034 メッ セー ジ を 表示 する 








ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、 金 額 以 外 が 入力 され た ら メ ッ セ ー ジ を 表示 する 方 法 に つ 
いて 解説 し ます 。 














テキ スト フィ ー ル ド に 金額 以外 の 
文字 が 入力 され る と 、 メ ッ セ ー:> 
が 表示 され る 






















_ 商 コン ピュ ー タ | 保護 モー ド : 無 区 











天 コン ピュ ー タ | 梨 護 モ ー ド : 押 区 


ReiWXe 事 eg 当 目 上 用 目 index.htm 


<!DOCTYPBE htm1] PUBLTC "-//W3C//DTD HTML, 4.01 Trans1t1ona1 / /EN"> 
<htm] > 
<head> 

<meta http-equ1 マ = "conEen ヒ -type" conEen ヒ = "tex 上 /htm] : 
CharSe ヒ =utF-8"> 
< ヒュ 上 16> 了 aaSC エ 1p 上 Samp1e</ ヒ ュ ヒ 1@e> 
<1ink re1="stylesheet" hrefF="SpryVa1idqdationTextFie1d.css" ]m 
type= "て tex 上 /css" media="a11"> 。 
<1ink re1="sty1eshee 上 " type= "tex 上 /css" href="main .CS8" 
media="a11 "> の 


の 


く 8C エ 1p sro="SpryVa1iqdationmextFie1d.]s" = 

上 YDe= "上 @Gx ヒ / ]a び aSC エ 1 ユヒ "></ SC エエ 1D ヒ > 5 司 

く SC エ 1p 上 yDe= " 七 @ 広 ヒ / Ja で aS ご エモ D 七 " 8 エ = "ma1n . 8S "></ SC エエ D ヒ > 
</head> 
くわ ody> 

<h1 > 落札 希望 金額 </ ロ 1> 


<Eorm aotion=" ./check . Cg1" method="get" 1qd="mainForm" 
name= "matnForm"> 
<Span 1qd= "checjkData1 "> 
金額 :<1npu type= "tex 上 " name=" モ ex モ 上 1" 1q="tex 上 1 "> 
<Span class= "textFie1qRequiredMsg "> 金額 を 入力 し て くだ さい </ span> 
<Span c]ass= "textFie1dTnvya11qFormatMsd"> 
金額 以外 は 受け 付け ませ ん </ span> 
</ Span> 
< く D エ > 
<1npu type="submi" va1ue=" 送 信 "> 
</ Form> 
</body> 
</htm1> 


頭 Adobe Spry フ レー ム ワ ー ク で 使用 する スタ イル シー ト フ ァイル を 読み 込む 
許 Adobe Spry フ レー ム ワ ー ク を 読み 込む 


SeIXaeejg 委 目 用 用 本 WS 晴 main.js 


window.on1oad = Funotion() { 
new Spry .W1dget .Va1idationTextFie1dq ("checkData1" , "currency", |m 
{va1idateOn : [ "b1ur" , "change"] } ) : ピピ 








副 |D 名 が 「checkData 1 」 で 囲ま れ た 範囲 に ある テキ スト フィ ー ル ド の 内 容 を チェ ッ ク す る よう に 設定 する 














(@⑯】 損 6】 玉 金 人 額 か どう か チェ ッ ク を 行う に は [Spry.Widget.ValidationTextField()」 で 「currency」 を 指定 する 


リア ル タ イ ム に 入力 され た 内 容 が 金額 か どう か を 調べ る に は 、Adobe Spry フ レー ム ワ ー ク を 利用 する 
と 簡単 で す 。 テキ スト フィ ー ル ド の チェ ッ ク を 行う SpryValidationTextField.jS フ ァイル と 関連 する スタ イ 
ル シ ー ト ファ イル (SpryValidationTextField.css) を 読み 込み ます 。 チェ ッ ク し た い テ キス ト フ ィ ー ル ド を 
<Span> タ グ で 囲み 、ID 名 を 指定 し て お きま す 。 さ ら に 入力 時 に 表示 する メッ セー ジ を <span> タ グ で 囲み 、 
スタ イル シー ト の クラ ス 名 を 「textfieldRHequiredMsg」 に し ます 。 入力 内 容 が 不正 だ っ た 場合 の メッ セー 




















ジ も 同様 に <Span> タ グ で 囲み 、 ス タイ ル シ ー ト クラ ス 名 を 「textfieldInvalidFormatMsg」 に し ます 。 
HTML 文 書 の 設定 が 終わ っ た ら ス クリ プ ト で チェ ッ ク す る 対象 と な る テキ スト フィ ー ル ド を 「Spry. 
Widget.ValidationTextField()」 で 指定 し ます 。 パラ メー タ に は チェ ッ ク す る 領域 を 示す ID 名 、 チ ェ ッ 
ク す る 種類 、 い つ チ ェ ッ ク す る か な どの オプ ショ ン を 指定 し ます 。 金額 か どう か を チェ ッ ク す る 場合 に は ら 
番目 の パラ メー タ に 「currency」 の 文字 を 指定 し ます 。 これ で リア ル タ イ ム に 人 金額 か どう か の 入力 チェ ッ 
ク が 行わ れ ま す 。 























ー ふ N」 眼 0 - ヨ 1dVHO 





ー ふ | 上 0-3 コ ldYHO 


に 3】 













SECTION | 議 


日 付 以外 が 入力 され た ら 
035 メッ セー ジ を 表示 する 





ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、 日 付 以外 が 入力 され た ら メ ッ セ ー ジ を 表示 する 方 法 に つ 
いて 解説 し ます 。 
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テキ スト フィ ー ル ド に 日 付 以外 の 
文字 が 入力 され る と 、 メ ッ セ ー:> 
が 表示 され る 


生年 月 日 の 確認 













⑨9CGcocEcB ロ RE 


容 信 | 誠 vesptsame | | 公 ・ 








二 コン ピュ ー タ | 保護 モー ド : 無効 


に 






















生年 月 日 :ls51 に yymmydd 角 式 以 外 は 受け 付け ませ ん | 





コン ピュ ー タ | 保護 モー ド : 舞 交 








ReWeej り 当 目 用 | index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 

<meta hEEtp-equiv= "Conten ヒ -type" conEen= "ex 上 /htm1 : 
CharSe ヒ =uF-8"> 
< ヒュ 上 1]e>JavaSorip Samp1e< / モ 1 上 1e> 
<1ink re]="sty1eshee モ 上 " hreF="SpryVa1iqdationTextFie1d.css" 記 」 
type="texE/css" media="a11 "> 
<1ink re]="sty1eshee 上 " type= "Etex 七 /css" hrefF="main.Css" 
media="a11 "> 


く 8C エ 1p Sro="SpryVa1iqdationTextFie1d.]s" 
tyDe= " 上 ex 上 / る VaSC エ 1D 上 "></ SC エエ キテ に 
ぐ 8C エ 1Dt 上 yDe=" ヒ ex / る び aSC エ 1D ヒ "SC="main . 8 "></ SC エ 1p ヒ > 
</head> の 


<body> 
<h1> 生 年 月 日 の 確認 </h1> 
<Form ao 上 ion=" ./check . Cdg1" method= "ge" 1d="mainForm" = 
name= "ma1inForm"> * ご 
<Span 1d= "checkData1 "> 
生年 月 日 : <1npu ヒ 上 type=" 上 ex ヒ 上 " name=" ヒ ex モ 1" 1d=" モ ex 上 1"> 
<span class="textFie1qdRequiredMsd"> = 
Yyyy/mm/dd 形 式 で 入力 し て くだ さい </ span> 
<span class= "textF1ie1qdTnva11qFormatMsd"> 『。 
yyyy/mm/dd 形 式 以外 は 受け 付け ませ ん </ span> ご 
</ SDan> 
くわ エ > 
<1npu type="Submi" Va1ue=" 送 信 "> 
</ Form> 
</ body> 
</html> 





豆 Adobe Spry フ レー ム ワ ー ク で 使用 する スタ イル シー ト フ ァイル を 読み 込む 
許 Adobe Spry フ レー ム ワ ー ク を 読み 込む 


ee ヨ mee 当 目 用 本 本 交 main.js 


window.on1oad = fFunoction() { 
new Spry .Widget .Va1idationTextF1e1d ( "checkData1", "date", 回 
{format : "yyyy/mm/dd" , va1idateOn : [ "も 1ur" , "change" ] }) ) : 








副 |D 名 が 「checkData 1 」 で 囲ま れ た 範囲 - あ る テキ スト フィ ー ル ド の 内 容 を チェ ッ ク す る よう に 設定 する 














@ji 誠 9】 明 上 日 付か どう か チェ ッ ク す る に は [Spry.Widget.ValidationTextField()」 で [datel」 と フォ ー マ ッ ト を 指定 する 
り リアル タイ ム に 入力 され た 内 容 が 指定 され た 形式 の 日 付か どう か を 調べ る に は 、Adobe Spry フ レー ム 
ワー ク を 利用 する と 簡単 で す 。 テキ スト フィ ー ル ド の チェ ッ ク を 行う SpryValidationTextField.jS フ ァ イ 
ル と 関連 する スタ イル シー ト フ ァイル (SpryValidationTextField.css) を 読み 込み ます 。 チェ ッ ク し た い 
テキ スト フィ ー ル ド を <span> タ グ で 囲み 、ID 名 を 指定 し て お きま す 。 さら に 入力 時 に 表示 する メッ セー ジ 
を <span ロ > タグ で 囲み 、 ス タイ ル シ ー ト の クラ ス 名 を 「textfieldRequiredMsgl に し ます 。 入力 内 容 が 不 
正 だ っ た 場合 の メッ セー ジ も 同様 に cspan> タ グ で 囲み 、 ス タイ ル シ ー ト クラ ス 名 を 「textfieldInvalid 
FormatMsg」 に し ます 。 

HTML 文 書 の 設定 が 終わ っ つた ら ス クリ プ ト で チェ ッ ク す る 対象 と な る テキ スト フィ ー ル ド を 「Spry. 
Widget.ValidationTextField()」 で 指定 し ます 。 パラ メー タ に は チェ ッ ク す る 領域 を 示す ID 名 、 チ ェ ッ ク 
する 種類 、 い つ チ ェ ッ ク す る か な どの オプ ショ ン を 指定 し ます 。 日 付か どう か を チェ ッ ク す る 場合 に は 、 ら 番 

目 の パ ラメ ー タ に 「date」 の 文字 を 指定 し ます 。 次 に どの よう な 日 付 形式 か どう か を 9 番目 の 「format」 オ 
プシ ョ ン で 指定 し ます 。 年 は 「yy」、 月 は 「mm」、 日 に ち は 「dd」 で 示さ れ ま す 。 「mm/dd/yy」 で あれ ば 
「10/19/07」(2007 年 10 月 19 日 )、「yyyy/mm/dd」 で あれ ば 「 ら 007/1 0/ 19」 の 形式 を 受け 付け 
る よう に な り ま す 。 
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SSESGsMEGDIN 有 CHAPTER-03 036 


時 久 以外 が 入力 され た ら 
0KYo】 メッ セー ジ を 表示 する 












ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、 時 刻 以 外 が 入力 され た ら メ ッ セ ー ジ を 表示 する 方 法 に つ 
ーー いて 解説 し ます 。 














テキ スト フィ ー ル ド に 時 刻 以外 の 
文字 が 入力 され る と 、 メ ッ セ ー ジ 
が 表示 され る 


今朝 の 起床 時 刻 













時 | BEENMINESS 形 式 で 入力 し て くだ さい | 















二 コン ピュ ー タ | 保護 モー ド : 無効 
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ビー 委 0 -431dYHO 








凍 コン ピュ ー タ | 保護 モー ド : 無効 


Regge 当 目 用 用 同軸 了 index.htm 


<!DOCTYPE htm] PUBLTC "-//W3C//DTD HTML, 4 .01 Transitiona1 / /EN "> 
<htm1 ユ > 
<head> 
<meta h 上 上 Dー@Gqdu1 マ = "で COnt 上 en ヒ - 上 yDe" ConEen ヒ = " モ 上 ex 上 /htm1 : 
CharSe ヒ =u ヒ 上 F-8"> 
< キュ 1 上] e>JavaSo エ ip Samp1e</ モ 1 上 1e> 
<1ink re]="sty1esheet" hreF="SpryVa1iqdationTextFie1d.css" 記 」 
type="Eex 上 /css" media="a11"> 
<1ink re]="sty1esheet" type= "tex 上 /css" hrefF="main.Css" 
media="a11 "> 





< く 8C エ 1p ヒ so="SpryVa1iqdaionTextF1ie1d.]8" 
tyDe= "上 ex / aaSC エ 1D 七 "></ SC エ 1D キ > 回 
<SC エ 1p ヒ type=" モ ex / avVa8C エ 1p ヒ " Sro="matn .S"></ SC エ 1D セ モ > 
</head> の 


< くわ bod ア > 
<h1> 今 朝 の 起床 時 刻 </h1> 
<Form acion=" ./cheok . Cdg1" method= "ge" 1d="mainForm" ゃ ヽ 
name= "mainForm"> * ご 
<Span 1d= "cheockData1 "> 
時 刻 :<1npu ヒ 上 ypDe=" ヒ ex 上 " name= "上 ex モ 1" 1d=" モ ex モ 上 1 "> 
<span cl]ass="textFie1qdRequiredMsg"> 
HH : MM: S8 形 式 で 入力 し て くだ さい </ span> 
<Span class= "textF1e1dTnva1 1dFormatMsd "> う 
HH : MM: SS 形式 以外 は 受け 付け ませ ん < / span> * 
</ Span> 
< くわ エ > 
<1npu 革 上 ype=" Submit" Ya1ue=" 送信"> 
</ Form> 
</body> 
</htm1> 


頭 Adobe Spry フ レー ム ワ ー ク で 使用 する スタ イル シー ト フ ァイル を 読み 込む 
許 Adobe Spry フ レー ム ワ ー ク を 読み 込む 


Se)WXg9@) 当 目 用 目 main.js 


window.onload = fFunoction() { 
new Spry .W1dget .Va1idationTextFie1qd ("checkData1", "Eime", 回 
{Format : "hh:mm:ss", Ya1idateOn : [ "も b1ur" , "Change"] } ) : 








頭 |D 名 が 「checkData 1 」 で 囲ま れ た 範囲 - あ る テキ スト フィ ー ル ド の 内 容 を チェ ッ ク す る よう に 設定 する 


(@⑯】i 当 9】 衣 画 時 齋 か どう か を チェ ッ ク す る に は 「Spry.Widget.ValidationTextField()」 で [time」 と フォ ー マ ッ ト を 指定 する 


リアル タイ ム に 入力 され た 内 容 が 指定 され た 形式 の 時 刻 か どう か を 調べ る に は 、Adobe Spry フ レー ム 
ワー ク を 利用 する と 簡単 で す 。 テキ スト フィ ー ル ド の チェ ッ ク を 行う SpryValidationTextField.jS フ ァ イ 
ル と 関連 する スタ イル シー ト フ ァイル (SpryValidationTextField.css) を 読み 込み ます 。 チェ ッ ク し た い 
テキ スト フィ ー ル ド を <span> タ グ で 囲み 、ID 名 を 指定 し て お きま す 。 さら に 入力 時 に 表示 する メッ セー ジ 
を <span> タ グ で 囲み 、 ス タイ ル シ ー ト の クラ ス 名 を 「textfieldRequiredMsg] に し ます 。 入力 内 容 が 不 
正 だ っ た 場合 の メッ セー ジ も 同様 に <span> タ グ で 囲み 、 ス タイ ル シ ー ト クラ ス 名 を 「textfieldln 
validFormatMsgl に し ます 。 

HTML 文 書 の 設定 が 終わ つっ たら 、 ス クリ プ ト で チェ ッ ク す る 対象 と な る テキ スト フィ ー ル ド を 「Spry. 








Widget.ValidationTextField()」 で 指定 し ます 。 パラ メー タ に は チェ ッ ク す る 領域 を 示す ID 名 、 チ ェ ッ ク 
する 種類 、 い つ チ ェ ッ ク す る か な どの オプ ショ ン を 指定 し ます 。 時 刻 か どう か を チェ ッ ク す る 場合 に は 、 番 
目 の パ ラメ ー タ に 「time」 の 文字 を 指定 し ます 。 次 に どの よう な 時 刻 形式 か どう か を d 番 目 の 「format」 オ 
プシ ョ ン で 指定 し ます 。 時 は 「hh」、 分 は 「mm」、 秒 は 「ss] で 示さ れ ま す 。 「hh:mm:ss」 で あれ ば 、 
「11:16:35」(1 1 時 16 分 35 秒 ) の 形式 を 受け 付け る こと に な り ま す 。 また 、 タ イム ゾー ン も 許可 する 場 
合 に は 、「tt」 を 使っ て 指定 し ます 。 

















ビー 眼 EO-d ヨ 1dVYHO 










SECTION 旨 CHAPTER-03 | 103Z 
コア IP アド レス 以外 が 入力 され た ら 
メッ セー ジ を 表示 する 


ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、IP ア ドレ ス 以 外 が 入力 され た ら メ ッ セ ー ジ を 表示 する 方 法 
エ に つい て 解説 し ます 。 
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GO 


次 < 交 |@avasrpt sampe 


の |@ EGGGTTDKS55Oc 3 還 ltesera 
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テキ スト フィ ー ル ド に IP アド レス 
以外 の 文字 が 入力 され る と 、 メ ッ 
セー ジ が 表示 され る 


IP アド レス の 確認 





TP アド レス : アド レス を 入力 し て くだ さい 
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ト 食 -・ 回 


て KO ェ | の C:YOaoSopt-Samr 避 


裕人 * |@esptsampe | 


卓 コン ピュ ー タ | 保護 モー ド : 舞 交 。 


we 




















IP アド レス の 確認 


テー ふい 眼 50-d コ ldVHO 





TP アド レス :|1923 臣 アレ ス 以 外 は 受け 付け ませ ん | 








二 コン ビ ピュータ | 保護 モー ド : 無効 





ReWXe 事 9 当 用 用 目 index.htm 


く <!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 
< く meta hEtDp-eqdu1 マ = "Conten ヒ 上 ype" Conten 二 = "ex 上 /htm1 : 
CharSe ヒ =u 上 F-8"> 
< キュ 上 1e>JaVvaSc て 1p 上 Samp1e</ ヒ 1 ヒ ]e> 
<1ink re]="sty1eshee 上 " hreF="SpryVa1iqdationTextFie1d.css" |m 
type= "tex 上 /css" media="a11 "> 
<1ink re]="sty1eshee 上 " type= "texE/css" hrefF="main.ocss" 
media="a11 "> 
く 8C エ 1D sro="SpryVa11qdationTextF1e1d.]s" 
tyDpe= " tex / JaVaSC エ 1D "></ SC エ 1Dp セ 上 > g 
く SCr1p 上 ype="Eex / JaVaSC エ 1D " SC= "matin .S"></ SC エ 1p ヒ > 


</head> の 





ンー 


<bod ツ > 
<h1>TP ア ドレ ス の 確認 </h ロ 1 > 
<Form acC ヒ ion=" ./cheok . Cg1" method= "gde 上 " 1d="mainEForm" =。 
name= "mainForm"> 『 
<Span 1d="checkData1 "> 
TP アド レス :<1inpu tyDe= "上 ex ヒ 上" name= "上 @Gx 七 1" 1d= "ヒヒ 1 "> 
<span cl]ass="texEFie1qRequiredMsg"> 
TP アド レス を 入力 し て くだ さい </ span> * 
<span cl]ass= "textFie1qdTnva11qdFormatMsd"> 
エ P ア ドレ ス 以 外 は 受け 付け ませ ん </ span> 4 
</ Span> 
< くわ エ > 
<1inpu type=" Subm1it" Ya]1ue=" 送 信 "> 
</fForm> 
</body> 
</htm1> 


頭 へ Adobe Spry フ レー ム ワ ー ク で 使用 する スタ イル シー ト フ ァイル を 読み 込む 
許 Adobe Spry フ レー ム ワ ー ク を 読み 込む 


eXg 事 9e り 赴 目 用 | main.jS 


window.on1oad = fFunction() ( 
new Spry .Widget .Va1idationTextFie1d ("checkData1", "1p", 」 
{va1iqdateOn : [ "も 1ur" , "chanqde" ] } ) : 





} 


頭 |D 名 が 「checkData 1] 」 で 囲ま れ た 範囲 - ち る テキ スト フィ ー ル ド の 内 容 を チェ ッ ク す る よう に 設定 する 





@ji】】 映 衣 P ア ドレ ス か どう か チェ ッ ク す る に は 「Spry.Widget.ValidationTextField()」 で 「ip」 を 指定 する 


り リアル タイ ム に 入力 され た 内 容 が IP アド レス か どう か を 調べ る に は 、Adobe Spry フ レー ム ワ ー ク を 利用 
する と 簡単 で す 。 テキ スト フィ ー ル ド の チェ ッ ク を 行う SpryValidationTextField.jS フ ァイル と 関連 する ス 
タイ ル シ ー ト ファ イル (SpryValidationTextField.css) を 読み 込み ます 。 チェ ッ ク し た い テ キス ト フ ィ ー ル 
ド を <span> タ グ で 囲み 、|D 名 を 指定 し て お きま す 。 さら に 入力 時 に 表示 する メッ セー ジ を <span> タ グ で 
囲み 、 ス タイ ル シ ー ト の クラ ス 名 を 「textfieldRequiredMsgl] に し ます 。 入力 内 容 が 不正 だ っ た 場合 の メッ 
セー ジ も 同様 に <Span> タ グ で 囲み 、 ス タイ ル シ ー ト クラ ス 名 を 「textfieldInvalidFormatMsgl に し ます 。 


HTML 文 書 の 設定 が 終わ っ た ら ス クリ プ ト で チェ ッ ク す る 対象 と な る テキ スト フィ ー ル ド を 「Spry. 
Widget.ValidationTextField()」 で 指定 し ます 。 パラ メー タ に は チェ ッ ク す る 領域 を 示す ID 名 、 チ ェ ッ ク 
する 種類 、 い つ チ ェ ッ ク す る か な どの オプ ショ ン を 指定 し ます 。 IP アド レス か どう か を チェ ッ ク す る 場合 に は 
番目 の パラ メー タ に 「ip」 の 文字 を 指定 し ます 。 これ で リア ル タ イ ム に IP アド レス か どう か の 入力 チェ ッ ク 
が 行わ れ ま す 。 























テー 委 E0- ヨ 1dVHO 








SE が | 較 CHAPTER-03 038 





038 0 





ッ セ ー ジ を 表示 する 








テー 眼 0 - 紀 1dYHO 





2 | 


ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、UHL 以 外 が 入力 され た ら メ ッ セ ー ジ を 表示 する 方 法 に つ 
いて 解説 し ます 。 














テキ スト フィ ー ル ド に URL 以外 
の 文字 が 入力 され る と 、 メ ッ セ ー 
ジ が 表示 され る 





| お 勧め サイ ト 登 録 


















) コ ンピュータ | モード 











ReWXg%e 当 目 用 目 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1] / /EN"> 
<htm1 > 
<head> 
<me ヒ ta hh 上 上 わ ー-eGqdu1 マ = "ConEen ヒ 上 type " ConEen ヒ = "上 ex 上 /htm1 : 
で CharSe ヒ =u 上 F-8"> ( 
< ヒュ 1 上]e> け JaVaSC エ ip Samp1e</ ヒ 上 1e> 
<1ink re]="sty1eshee 上 " hrefF="SpryVa1idationTextFie1d.css" 」 
type= "Etex 七 /css" media="a11"> 
<1ink re]="sty1esheet" type= "tex 上 /css" hrefE="main .Cs8" 
med1ia="a11 "> 


く SC エ 1p ヒ sro="SpryVa1iqdationTextFie1d.]s" 
tyYDe= "上 ex / るび a8C 了 1D "></ SC エ 1D ヒ > 司 
く SC エ 1D 七 上 YDe= "上 GE / ]a び SC て 1 や ヒ " S エ C="ma1m .S "></ SC エ ュ エモ > 
</head> の 


<body> 
<h1> お 勧め サイ ト 登 録 </h1> 
<Form action=" ./cheok . Cg1" method= "ge 上 " 1d="matnForm" 
name= "ma1nForm"> 
<Span 1d="checkData1 "> 
URL:<1nmpu 上 De=" 七 メモ" name=" ヒ xx ヒ 1" 1 エロ =" ヒ ex モ 1 "> 
<Span class="textFie1qdRequiredMsgd"> 


URL を 入力 し て くだ さい </ span> 
<span cl1ass="EextFie1dTnva11qdFormatMsd"> =. 
URL 以外 は 受け 付け ませ ん </ span> + ン 

</ SDan> 

< くわ エ > 

<1npu type="Submit" Ya]1ue=" 登 録 "> 

</ Form> 
</body テ > 


</htm1> 


頭 Adobe Spry フ レー ム ワ ー ク で 使用 する スタ イル シー ト フ ァイル を 読み 込む 
放 Adobe Spry フ レー ム ワ ー ク を 読み 込む 


5eg 邊 目 用 本 EYE 生生 mainjs 


window.on1oad = fFunction() { 
new Spry .Widget .Va1iqdationTextFie1d ("checkData1" , "ur エ 1",。 ]m 
{va1iqdateOn : [ "b1ur" , "change" ] } ) : … 





} 


豆 | 名 が 「checkData 1 」 で 囲ま れ た 範囲 に ある テキ スト フィ ー ル ド の 内 容 を チェ ッ ク す る よう に 設定 する 











(@⑯ 拓 5】 映 衣 URL か どう か を チェ ッ ク す る に は [Spry.Widget.ValidationTextField()」 で 「url」 を 指定 する 


り リアルタイム に 入力 され た 内 容 が URL か どう か を 調べ る に は 、Adobe Spry フ レー ム ワ ー ク を 利用 する 
と 簡単 で す 。 テキ スト フィ ー ル ド の チェ ッ ク を 行う SpryValidationTextField.JS フ ァイル と 関連 する スタ イ 
ル シ ー ト ファ イル (SpryValidationTextField.csS) を 読み 込み ます 。 チェ ッ ク し た い テ キス ト フ ィ ー ル ド を 
<Span> タ グ で 囲み 、ID 名 を 指定 し て お きま す 。 さ ら に 入力 時 に 表示 する メッ セー ジ を <span> タ グ で 囲み 、 
スタ イル シー ト の クラ ス 名 を 「textfieldRequiredHMsgl に し ます 。 入力 内 容 が 不正 だ っ た 場合 の メッ セー 
ジ モ も 同様 に <span> タ グ で 囲み 、 ス タイ ル シ ー ト クラ ス 名 を 「textfieldInvalidFormatMsgl に し ます 。 

HTML 文 書 の 設定 が 終わ っ た ら ス クリ プ ト で チェ ッ ク す る 対象 と な る テキ スト フィ ー ル ド を 「Spry. 
Widget.ValidationTextField()」 で 指定 し ます 。 パラ メー タ に は チェ ッ ク す る 領域 を 示す ID 名 、 チ ェ ッ ク 
する 種類 、 い つ チ ェ ッ ク す る か な どの オプ ショ ン を 指定 し ます 。 URL か どう か を チェ ッ ク す る 場合 に は 番目 
の パラ メー タ に 「url」 の 文字 を 指定 し ます 。 これ で リア ル タ イ ム に URL か どう か の 入力 チェ ッ ク が 行わ れ ま 
す 。 Adobe Spry フ レー ム ワ ー ク で 許さ れ て いる の は 、「http://」 で 始ま る アド レス か 、「ftp://」 で 始ま る ア 
ドレ ス に な り ま す 。 











































テー\NI 眼 と 0-d ヨ 1dVHO 







テー 上 E0-4 ヨ IdVHO 














SiEdliliG り IN CHAPTER-03 | 1]039 
039 メー ル ア ド レス 以外 が 入力 され た ら 
メッ セー ジ を 表示 する 





ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、 メ ー ル アド レス 以外 が 入力 され た ら メ ッ セ ー ジ を 表示 する 
方 法 に つい て 解説 し ます 。 















cescwsmr ・| ヶ | x lesen 。 ゎ ・| 


@wsotsampe | | 谷 ・ ー 時 は ペー ジ (P) マ 









テキ スト フィ ー ル ド に メー ル ア 
ドレ ス 以 外 の 文字 が 入力 され 
る と 、 メ ッ セ ー ジ が 表示 され る 









メー ル マ ガ ジン の 読者 登録 









メー ル ア ド レス : 





















つい |g Cesorpt-semr ・ 区 lxl | mm la d 


守 |@mesowksampe | | 全 ・ 回 ・ 











二 コン ピュ ー タ | 保護 モー ド : 押 交 








メー ル マ ガ ジン の 読者 登録 









メー ル ァ ドレ > : 還 語 証 請 還 還 計 記 還 ニル レア F し レス PH は 計 け 付け ませ 









パ am # 
商 コン ビ ピュータ | 保護 モー ド : 無効 








ReWXW 事 9e 当 目 上 | index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 

<meta h モ tp-eqdu1 マ = "ConEen ヒ -type" Conten ヒ ="Eex キ /htm] : 
Charse ヒ =utF-8"> 
< モ ュ 上 1e>JaVaSC て ip 上 Samp1e</ ヒ 1 上 1e> 
<1ink re1="styleshee" hrefF="SpryVa1idationTextFie1d.css" 記 」 
type=" tex 上 /css" media="a11"> 
<1ink re]="sty1esheet" tyDpe=" モ ex 七 /css" hrefF="main.oss" 
media="a11 "> 


<8C エ 1p 上 sro="SpryVa1idationTextFie1d.]s" 
YDe= "上 @Gx 七 / る で aSC エ 1p 七 "></ SC エ 1p セ > 回 
ぐ SC エ 1D 上 上 ype= " ヒ @G 上 / る マ aSC エ 1 エ D ヒ " 8 エ C= "ma1in . 8 "></ SC エ 1p ヒ > 
</head> ひ の 


< わ body> 
<h1> メ ー ル マガ ジン の 読者 登録 </h1> 
<Form ac 上 ion=" ./cheok . Cg1" method= "et 上" 1d="mainForm" @w 
mame= "matnForm"> を 
<Span 1qd="ochecjkData1 "> 
メー ル ア ド レス :<inpu 上 ype="Eex" name= "上 ex モ 1" 1d="E 上 ext 上 1 "> 
<span class="textFie1qdRequiredMsg"> “ 
メー ル ア ド レス を 入力 し て くだ さい </ span> \ー 
<Span class=" 上 extF1ie1dTnva] 1dFormatMsg "> 陣 
メー ル ア ド レス 以外 は 受け 付け ませ ん </ span> キン 
く / SDan> 
<D エ > 
<1npu type="subm1" va1ue=" 登 録 "> 
</fForm> 
</body> 
</htm1> 


本 Adobe Spry フ レー ム ワ ー ク で 使用 する スタ イル シー ト フ ァイル を 読み 込む 
攻 へ Adobe Spry フ レー ム ワ ー ク を 読み 込む 


Rg 放 ge 可 当 目 用 用 本 VER 間 交 main」js 


window .on1oad = function() { 
new Spry .W1dget .Va1idationTextFie1q ("checkData1", "emai1", |m 
{va1iqdateOn : [ "も 1ur" , "change" ] } ) : 。 





} 


頭 |D 名 が 「checkData 1 」 で 囲ま れ た 範囲 - あ る テキ スト フィ ー ル ド の 内 容 を チェ ッ ク す る よう に 設定 する 


@ 抽 斑 メー ル ア ド レス か どう か を チェ ッ ク す る に は 「Spry.Widget. ValidationTextField()」 で 「emalll を 指定 する 

り リアルタイム に 入力 され た 内 容 が メー ル ア ド レス か どう か を 調べ る に は 、Adobe Spry フ レー ム ワ ー ク を 
利用 する と 簡単 で す 。 テキ スト フィ ー ル ド の チェ ッ ク を 行う SpryValidationTextFieldjJS フ ァイル と 関連 
する スタ イル シー ト フ ァイル (SpryValidationTextField.css) を 読み 込み ます 。 チェ ッ ク し た い テ キス ト 
フィ ー ル ド を <span> タ グ で 囲み 、ID 名 を 指定 し て お きま す 。 さら に 入力 時 に 表示 する メッ セー ジ を 
<SDan ロ > タグ で 囲み 、 ス タイ ル シ ー ト の クラ ス 名 を 「textfieldRequiredMsgl」 に し ます 。 入力 内 容 が 不正 
だ っ た 場合 の メッ セー ジ も 同様 に <Span> タ グ で 囲み 、 ス タイ ル シ ー ト クラ ス 名 を 「textfieldInvalid 
FormatMsg」 に し ます 。 

HTML 文 書 の 設定 が 終わ っ つた ら ス クリ プ ト で チェ ッ ク す る 対象 と な る テキ スト フィ ー ル ド を 「Spry. 
Widget.ValidationTextField()」 で 指定 し ます 。 パラ メー タ に は チェ ッ ク す る 領域 を 示す ID 名 、 チ ェ ッ ク 
する 種類 、 い つ チ ェ ッ ク す る か な どの オプ ショ ン を 指定 し ます 。 メー ル ア ド レス か どう か を チェ ッ ク す る 場合 
に は 、 ら 番目 の パラ メー タ に 「email」 の 文字 を 指定 し ます 。 これ で リア ル タ イ ム に メー ル ア ド レス か どう か 
の 入力 チェ ッ ク が 行わ れ ま す 。 



































テー 眼 EO-3 ヨ 1dYHO 


























SsEsenRGNN | | 靖 [し 」CHArkos と 還 Z 


0 万] 入力 パタ ー ン を 指定 する 





ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、 特 定 の 形式 だ け を 入力 で きる よう に 制限 する 方 法 に つい 
ーー て 解説 し ます 。 












Live search お ・ 


ーー ト Ae_e 


= ゆ 。<。 に) ペー ジ (P) マ = 
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テキ スト フィ ー ル ド に ABC-nnn-000 以 外 
の パ バターン を 入力 制限 する (n は 数 値 ) 


















ーーPDP CT: 


に AG に っ こ oc 
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商 コン ピュ ー タ | 保護 モー ド : 無効 


ー 叶 | 眼 0O-d ヨ 1dYHO 


ABC-000 形 式 以外 は 受け 伯 す ませ ん l 

















商 コン ピュ ー タ | 保護 モー ド : 無効 


SeWa 雪 wej7 当 目 用 用 馬 大 際 index.htm 





<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 
<me ヒ a h 上 上 わ -@GqUu1V= "で On 上 Gn ヒ 上 ye " ConEen ヒ = "上 ex 上 /htm1] : 
Cha エ SeG ヒ =u 上 F-8"> 
< ヒュ 1 上 16>JaVaSC エ 1p 七 Samp1e</ ヒ 1 ユヒ]e> 
<1ink re1="styleshee" は 
type=" tex 上 /css" media="a11"> ( 
<1ink re]="sty1eshee 上 " type="tex モ 上 /css" hrefF="main.CSS" 
media="a11 "> 


<8Cr1p sro="SpryVa1iqdationTextFie1d.]S" = 
YDe= "上 @x ヒ / ] aaSC エ 1Dp 七 ">< / SC エエ p セ > 《 本 
<8C エ 1p ヒ 上 yDe= "上 屋上 / する aaSC エ ユエ D 七 " S エ で ="ma1inm .]S"></ SC エ ュ わ ヒ > 
</head> の 


28 | 


<body テ > 


<h1 > 在庫 確認 </h1 > 
<Form act1on=" ./cheock .Cg1" method= "get 上 " 1d="mainForm" Y 
name= "ma1nForm"> * デ 


<Span 1d= "checkData1 "> 
商品 コー ド :<input type=" 上 ex 上 " name=" 上 ex 上 1" 1d=" リ tex 上 1 "> 
<Span Cass="Eex モ Fie1qReguiredMsd"> *、 


ABC-000 形 式 で 入力 し て くだ さい </ span> ゃ デ 
<Span cl]ass="Eex 上 Fie1dTnva11qdFormatMsd"> @v 
ABC-000 形 式 以外 は 受け 付け ませ ん </ span> ご 

</ Span> 

くわ エ > 

<1npu type="subm1 ヒ 上 " va1ue=" 確 認 "> 

</ Form> 
</body> 


</htm1> 


一 Adobe Spry フ レー ム ワ ー ク で 使用 する スタ イル シー ト フ ァイル を 読み 込む 
話 Adobe Spry フ レー ム ワ ー ク を 読み 込む 


Seamgej 当 目 用 用 馬 S 瑞 語 あ main.js 


window.on1oad = funoction() 【 
new Spry .W1dget .Va1idationTextFie1d( "checkData1" , "Custom", 「 





{pattern : "ABC-000-\\X\\Y\\Z" , useCharaoterMasking : 上 rUe, 
va1idateOn : [ "も b1ur" , "change" ] } ) : ーー 


} 





頭 | 名 が 「checkData 1 」 で 囲ま れ た 範囲 に - あ る テキ スト フィ ー ル ド の 内 容 を チェ ッ ク す る よう に 設定 する 











⑯ 員 9】 晶 瞳 特定 の 形式 で 入力 制限 を 行う に は 「Spry.Widget ValidationTextField()」 で [custom」 と 入力 パタ ー ン を 指定 する 


り リアルタイム に 入力 され た 内 容 を 制限 する に は 、Adobe Spry フ レー ム ワ ー ク を 利用 する と 簡単 で す 。 テ 
キス ト フ ィ ー ル ド の チェ ッ ク を 行う SpryValidationTextField.js フ ァイル と 関連 する スタ イル シー ト フ ァ イ 
ル (SpryValidationTextField.css) を 読み 込み ます 。 チェ ッ ク し た い テ キス ト フ ィ ー ル ド を <span> タ グ で 
囲み 、ID 名 を 指定 し て お きま す 。 さら に 入力 時 に 表示 する メッ セー ジ を <span> タ グ で 囲み スタ イル シー ト 
の クラ ス 名 を 「textfieldRHequiredHMsgl に し ます 。 入力 内 容 が 不正 だ っ た 場合 の メッ セー ジ も 同様 に 
<SDpan> タ グ で 囲み 、 ス タイ ル シ ー ト クラ ス 名 を 「textfieldInvalidFormatMsgl に し ます 。 

HTML 文 書 の 設定 が 終わ っ た ら ス クリ プ ト で チェ ッ ク す る 対象 と な る テキ スト フィ ー ル ド を 「Spry. 
Widget.ValidationTextField()」 で 指定 し ます 。 パラ メー タ に は チェ ッ ク す る 領域 を 示す ID 名 、 チ ェ ッ ク 
する 種類 、 い つ チ ェ ッ ク す る か な どの オプ ショ ン を 指定 し ます 。 特定 の 入力 パタ ー ン の み 受 け 付 ける よう 
に する 場合 に は 、2 番 目 の パ ラメ ー タ に 「custom」 の 文字 を 指定 し ます 。 次 に 3 番目 の オプ ショ ン で 入力 
パタ ー ン を 指定 し ます 。 これ は 、「pattern」 を 使っ て 入力 可能 な 文字 列 を 指定 し ます 。 強制 的 に 文字 を 挿 
入 / 表 示す る に は 「\\」 の 後ろ に 表示 する 文字 を 1 文字 ずつ 指定 し 、「useCharacterMasking」 で 「true」 
を 指定 し ます 。 
































ーー ふ 」 当 0 -3 ヨ IdVHO 












「 | 較 CHAPTER-03 041 
04 ] 必要 な 項目 が すべ て 
入力 され て いた ら 送 信 す る 





テー 眼 E0-d ヨ 1dVHO 





ここ で は 、 必 要 な 項目 が すべ て 入力 され て いる か どう か を チェ ッ ク し 、 す べ て 入力 され て いた ら 、 送 信 で きる 
よう に する 方 法 に つい て 解説 し ます 。 





FN 和 加 COevescrpt amp -| っ | Fs 昌 Live Sh 項 


ーーーーーーーーー ーー ーー 





名 前 : 鈴本 一 郎 
年 齢 :26 
住 所 : 


メー ル : 
ブロ ダグ: 


1 未 入力 の 項目 が あり ます 


に 












* 印 が 付い た テキ スト フィ ー 
ルド が 未 入 力 の 場合 に ボタ ン ララ ー ト タイ アロ グ を 表示 
人 し て 送信 は 行わ な い 





ReiWXeee 当 目 用 | index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 
<meta h ヒ 上 D- edu1Y=" ConEen ヒ -type" ConEen ヒ = "ex モ /htm] : 
CharSe=uF-8"> 
< ヒュ 上]e>JaVaSC エ 1p 七 Samp1e</ ヒ 上]e> 
<1ink re]="sty]1eshee" type="ex/css" hrefF="main.css" 
media="a11 "> 
く 8C エ 1 上 上 ype= "上 ex / る VaSC エ 1D ヒ 上" 8S エ C= "ma1in . 8 "></ SC エ ュ 1 わ ヒ > 
</head> 
<Dbody> 
<h1> ユ ー ザ ー 登 録 </h1> 
<Form aoion=" ./regist .cgi" method="get 上 " 1d="ma1nForm" 
name= "ma1inForm"> の 


名 前 :<npu type=" ヒ ex ヒ " name="uSerName" 1qd="uSerName ">*<D エ > 
年 齢 :<1nput tyDpe=" ヒ ex ヒ " name="u8S ら GrAOG" 1d="uS ら G エ AG ">*※<D エ > 
住 所 :<1nput type="Eex 上 " name="uSerAqddresS" 1d="uSe エ AdQdreS8 "> ネ <D エ > 
メー ル :<inmpu 上 type="Eex モ " name="uSerEma11" 1d="userEmma1 ] ">< わ エッ > 
ブロ グ :<input type="EexE" name="userBlog" 1q="userB1og">< わ ェ > 
* は 必須 項目 <D ェ > 
<1npu type= "Submit" 1d="1og1inButEon" Ya1ue=" 送 信 "> 
</ Form> 
</bod ア > 
</htm] > 


副 入力 チェ ッ ク を 行う テキ スト フィ ー ル ド に ID 名 を 指定 し て お く 


eemwe 当 目 用 用 本 本 韻 参 main.js 


window.on1oad = Funotion( ) { 
document . getE1ementByTd ( "mainForm" ) .onsubmi = Funotion ( ) { 
Yar cheockList = ["userName", "userAge", "userAqqdress" ] : 一 罰 
For (Var =0: <checkLiis .1ength: ュ ++) { 
if ( !document .getE1ementByTq (checkList [1] ) .Ya1ue) { 
a1ert ( " 未 入力 の 項目 が あり ます " ) : 
return fa]se: 
} 
} 
return 上 ue 一 衣 





} 


トー 


… 入 力 チ ェ エッ ク す る テキ スト フィ ー ル ド の ID 名 を 配列 に 入れ る 

… 配 列 の 数 だ け 繰 り 返 し て テキ スト フィ ー ル ド の 内 容 を 読み 出し 、 空 欄 か どう か 調べ る 

… 空 欄 が 1 つ で も あっ た 場合 は アラ ー ト ダイ アロ グ を 表示 し 、「return false」 と し て 送信 し な いよ うに する 
… 必 須 項 目 が 入力 され て いた 場合 に は 「return true」 と し て デー タ の 送信 を 行う 














(@ 席 3】 敵 衣 チェック する テキ スト フィ ー ル ド の ID 名 を 配列 に 入れ て お く 
テキ スト フィ ー ル ド の 空欄 チェ ッ ク は 、「value」 プ ロ パ ティ を 読み 出し 文字 が 入力 され て いる か どう か を 調 
べ ま す 。 テキ スト フィ ー ル ド が 1 つの 場合 は 簡単 で す が 、 複 数 ある 場合 に は あら か じ め 調 べ る テキ スト フィ ー 
ルド の ID 名 を 配列 に 入れ て お きま す 。 配列 の 数 だ け 繰り 返し て 空欄 チェ ッ ク を 行え ば 簡単 な プロ グラ ム で 





すみ ます 。 








テー ふい | 眼 E0 - ヨ ldVHO 








テー 上 EO-d ヨ 1dVHO 

















SE で 対人 IN 還 [し 」CHAros r[ loz2 


意 し ます ] の ラジ オ ポ ボタン が ON に 
0 アア な つた ら 信 ポタ ン を 有効 に する 











ここ で は 、 特 定 の ラジ オ ボ タ ン が ON に な っ た と きのみ 、 送 信 ボ タン を 有効 に する 方 法 に つい て 解説 し ます 。 











ド に トド 8 mas s= 


半袖 2 aasopt sample 




















[同意 し ます ] の ラジ オ ボ タ ン が 
ON に な る と 、 [次 へ ] ボ タン が 有 
効 に な る 











吉 コン ビ ピュータ | 保護 モー ド : 無効 ンー 


Seeme 当 目 用 同軸 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Trans1tiona1 / /EN"> 
<htm] > 
<head> 
<meta h ヒ 上 わ -equ1 マ = "COn 七 Gn ヒ 上 pe" Conten ヒ = "モモ 上 /hEtm1 
CharSe キ =utF-8"> 
< ヒュ 1 上 1@>JaVaSC と 1p 七 Samp1e</ ヒ 1 上 1e> 
<1ink re1="sty1eshee" ype="Eex 上 /css" hreF="ma1n.CSS" 
media="a11 "> 5 の 


) 


で SC エ 1D 上 上 yDe= "上 Gx モ / Ja マ aSC エ 1D" So= "main .S"></ SC エエ セキ > 


</heaqd> 
<body> 
<h1 > 使用 許諾 契約 書 の 確認 </h1> 
<Form ac 上 ion=" ./ConF1rm.Cg1" method="get" 1qd="mainForm" 寺 。 
name= "mainForm"> ーー 
<texEarea Co]1s="30" rows="4"> 本 書 に 掲載 され て いる サン プル を 使用 し て 発生 し た 『。 
損害 に つい て は 責任 を 負わ な いも の と し ます 。 < / 上 ex 上 a エ てら Ga><D エ > を デア 


<1abe1><inpu type="radio" name="confFirm" きま 。 
1d= "NG" > 同意 し ませ ん </ 1albe1><b エ > < 
<1abe1><1npu 上 type="radio" name="oconfFirm" 寺 。 
1d= "Accep セ "> 同意 し ます < / 1abe]><b エ > を 
<1npu type="subm1 ヒ 上 " 1qd="nexEButton" va1ue=" 次 へ " disab1ed> 一 久 
</ Form> 
</body> 
</htm1> 


本 あらかじめ ボ タン は 無効 に し て お く 





中 目 用 上 main.js 


window.on1oad = Funotion ( ) { 
document .getE1ementByTqd ( "Accep" ) .onc1ick = Funotion ( ) { 」 
documen . getE1ementBy エ Td ( "nexEBuEon" ) .disab1ed = Fa]se: 
} 
document . getE1ementByTd ( "NG" ) .onc1ick = fFunotion( ) { 司 
document .getE1emenByTdq ( "next 上 Bu 上 ton" ) .disab1ed = rue: 
} 





避 


意 し ます ] の ラジ オ ボ タ ン が クリ ッ ク さ れ た ら [ 次 へ ] ボ タン を 有効 に する 
[同意 し ませ ん ] の ラジ オ ボ タ ン が クリ ッ ク さ れ た ら [ 次 へ ] ボ タン を 無効 に する 





@jjBg】 映 租 ラジ オ ボ タ ン の 選択 状況 に 応じ て 「disabled」 プ ロ パ ティ を 操作 する 
特定 の ラジ オ ボ タ ン が 選択 され た ら ボ タン を 有効 に ける に は 、「disabled」 プ ロ パ ティ を 操作 し ます 。 サ 
ンプ ル で は [同意 し ます ] の ラジ オ ボ タ ン が クリ ッ ク さ れ た ら [ 次 へ ボタ ン ] の 「disabled」 プ ロ パ ティ に 
[false」 を 指定 し クリ ッ ク で きる よう に し て いま す 。 逆 に [同意 し ませ ん ] の ラジ オ ボ タ ン が クリ ッ ク さ れ た 場 








ロ 


合 に は 、「 次 へ ボタ ン 」 の 「disabled] プ ロバ ティ に 「true」 を 指定 し クリ ッ ク で き な い よう に し ます 。 











ビー 上 0 -3 ヨ IdVHO 



















ー ふ | 委 EO- ヨ ldVHO 











esakeN 導 上 | [し 」HAPreeosy[ les] 
043 どの ラジ オ ボ タ ン が ON に 
な っ て いる か 調べ る 











ここ で は 、 ど の ラジ オ ボ タ ン が ON に な っ て いる か 調べ 、 そ の 項目 名 を ペー ジ 上 に 表示 する 方 法 に つい て 解 
説 し ます 。 











上 | 職業 を お 答え くだ さい 


@ 農家 
会 社員 
0 自 宮 業 















ェ ーー テー デニ B ゥ |x| Live Search 


| | 合 ・ 還 ・ 更 ・ は ペー の ・ 





OO- ey 


SS < 交 | 容 JavaScript Sample 


























職業 を お 答え くだ さい 





部 コン ピュ ー タ | 保護 モー ド : 無効 





ラジ オ ボ タ ン の 1 つ を ON に し て [チェック] 
ボタ ン を クリ ッ ク す る と … 


@ 民家 
6 会 社員 
〇 自 宮 業 
その他 








DN に な っ て いる ラジ オ ボ タ ン 


に 農家 が 選択 さ ます 
の 項目 名 が 表示 され る sda 











井 コン ピュ ー タ | 保護 モー ド : 無効 ”。。 


ReWXge の 当 目 用 | index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta h 上 上 わ ーGqu1 ざ = "で COn ヒ en ヒ - 上 pe" Conten=" ヒ ex 七 /htm1] : 
CharSe ヒ =utF-8 "> 
< ヒュ 1 七 1e>JaVaSC エ 1p 上 Samp1e ら </ ヒ 1 ヒ 1@> 
<1ink re1="sty1eshee" ype="Eex 上 /css" hreF="matin.CSS" 
media="a11 "> 
< く SC エ 1pt ype=" ヒ ex / ] る aaS ご て 1 七 " SC= "main . 8 "></ SC エ 1p キ > 
</head> の 


<body テ > 
<h1 > 職業 を お 答え くだ さい < /h1> 
<Form ac1ion=" ./enq.Cg1" method= "ge 上 " 1d="mainForm" まま 。 
name= "ma1nForm"> + ご 
<1abe1><inpu type="radio" name="work" va1lue=" 農家 "> = 
農家 </ 1abe ユ ><b エ > キ 
<1abe1><1nput type="radio" name="work" Ya]ue=" 会 社員 "> 1 
会 社員 < / 1aDe ユ 1 ><b ェ > の 
<1abe1><1npuE Etype="radio" name="work" va1ue=" 自 営業 "> き 。 
自営 業 </ 1abe ユ >< わ エ > ふ ー 
<1abe1><1npu 上 type="radio" name="work" Ya1ue= "その他 "> き 
その 他 < / 1abe1><D ェ > ーー 
<1npu 上 上 ype= "butEton" 1d= "checjkButon" Ya1ue= "チェ ッ ク "> 
</ Form> 
<dQ1V 1d="resu1 上 "> 結果 :</ ュ マ > 
</body> 
</htm]> 


還 ラジ オ ボ タ ン に は 「name」 属 性 で 名 前 を 指定 し て お く 
時 目 上 用 本 ER 同 凍 あ mainjs 


window.on1oad = fFunotion( ) { 
document . getE1emenEtByTd ("checkButton" ) .onc1ick = Funotion( ) { 
Yar radioLis = document .getE1ementsByName ( "work" ) : 一 名 
Yar Str = "選択 され て いま せん ": 
For (Var 1=0: 1i<radioList.1ength: ュ ++) { 一 婁 
ifF (radioList [1] .checked) {一 話 
Str = radioLisE [1] .Yvalue + "が 選択 され て いま す ": 
break: 





} 
document . getE1ementByTq ( "resu1 ヒ " ) .1nnerHTMT, = st 上 エ : 


台 「work」 と いう 名 前 を 持つ ラジ オ ボ タ ン の 情報 を 取得 する 
話 ラジ オ ボ タ ン の 数 だ け 繰 り 返す 
橋 「checked」 プ ロ パ ティ が [true」 の 場合 は 選択 され て いる の で 選択 項目 を 表示 する 

















@ 損 抽 】 敵 租 「EetElementSByName()」 で 同じ 名 前 の エレ メン ト を 取得 する 


「document.getElementsByName()」 を 使う と 、 ペ ー ジ 上 に ある 同じ 名 前 の エレ メン ト ( ラ ジオ ボタ ン )) 
を 取得 する こと が で きま す 。 これ は ラジ オ ボ タ ン で 同じ 名 前 (グル ー プ 名 ) を 指定 する た め 、 こ の メソ ッ ド を 


使う こと で 特定 の ラジ オ ボ タ ング ルー プ の 情報 を 取得 する こと が で きま す 。 取得 し た ラジ オ ボ タ ン の 
「checked] プ ロ パ ティ を 調べ る こと で 、 ど の ラジ オ ボ タ ン が ON に な っ て いる か を 取得 する こと が で きま す 。 











ビー へ At 眼 0 -4 ヨ 1dYHO 






eleN 較 有 


CHAPTER-03 『 044 





どの チェ エック ボッ ンス が 


と ON に な っ てい る か 調べ る 








ーー 法 に つい て 解説 し ます 。 


ここ で は 、 ど の チェ ッ ク ボ ックス が ON に な っ て いる か 調べ 、ON に な っ て いる 項目 名 を ペー ジ 上 に 表示 する 方 
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テー ふい 眼 0 -1dVHO 


























商 コン ピュ ー タ | 保護 モー ド : 無効 MacOSX 
ーー ーー- ーー ーー ーー 癌 Linu / Ua 
チェ ッ ク ボ ックス を ON に し て [チェック] ナーw 和 
ボタ ン を クリ ッ ク す る と … 
1S 


お 使い の Os を お 答え くだ さい 














軸 












ON に な っ て いる チェ ッ ク ボ ックス 
の 項目 一 覧 が 表示 され る 





Siac が 選択 され て いま す 
Wm が 選択 され て いま す 




















Se)WXd 事 %e 当 目 上 用 上 index.htm 








表 コン ピュ ー タ | 保護 モー ド : 無 基 


<!DOCTYPE htm1] PUBLTC "-//W3C//DTD HTMT, 4.01 Trans1tiona1 / /EN"> 


<htm] > 
<head> 


<meta hEtp-eGqdu1 マ = "ConEen ヒ -t 上 ype" ConEen ヒ ="Eex 七 /htm] : 


CharSeG ヒ =u 革 -8"> 
< ヒュ 1 上 1e>JaVaSC エ 1p 七 Samp1e</ 七 1 上 1e> 


<1ink re]="styleshee ヒ 上" type="EexE/css" hreF="main.Css" 


med1ia="a11 "> 


ぐ く SC エ 1p 上 ype= " ヒ @x / aaSC エ 1D ヒ "8S エ oO= "ma1n . 8 "></ SC エ 1p ヒ > 


</head> 
< くわ body> 
<h1 > お 使い の OS を お 答え くだ さい < /h1> 


人 


<Form aC ヒ 1on=" ./enqd.Cg1" method= "ge 上 " 1d="mainForm" 
name= "matnForm"> 
<1abe1><input type="cheockbox" 1d="OS1" name="O81" き 。 
Ya1ue= "Mac ">MacOS ヌメ </1a わ De]><D エ > *ー 
<1abe1><1npu 上 type="cheokbox" 1d="OS2" name="OS2" =- 


Ya1ue= "Unix"> エ 1mux / Un ュ ix</1aDe]><b エ > < 
<1abe1><inpu type="checkbox" 1d="OS3" name="OS83" き 。 
Ya1ue= "Win ">W1ndows</ 1abe]>< わ エ > サー 
<1abe1><inpu type="ocheckbox" 1d="OS4" name="OS4" 寺 。 
Ya]ue="etc"> そ の 他 </ 1abe]><b ェ > ォ + ご 
<1npu type= "bu 上 Eon" 1d="checkButEon" Ya1ue= "チェ エッ クリ "> 

</ Form> 

<diV 1d= "resu1 "> 結果 :</d ュ 1 マ > 

</body> 
</htm1> 


攻 チェ ッ ク ボ ックス に は ID 名 を 指定 し て お く 


ge 本 目 用 用 本 RS 二 講 あ main.js 


window.on1oad = Funotion( ) { 
document . getE1ementByTd ( "checkButEton" ) .onc1iock = Funotion( ) ( 
var checkLis 上 = ["OS1", "OS2" , "OS83" , "OS4 " ] 一環 
役 で 江 だ の ーッ 
For (Var 1=0: 1<checkList.1ength: 1++) { 一 許 
var chkOb] = document .getE1ementByTq (checkLis [] ) : 


ifF (chkOb] . checked) { 
上 += chkOb] .va1ue + "が 選択 され て いま す <br>": 
} 


ifF (!st エ ) str = " 何 も 選 択 さ れ て いま せん ": 
document . getE1LemenByTdq ( "resu1" ) . 1nnerHTMT, = St 上 了 エ : 





右 調べ る チェ ッ ク ボ ックス の ID 名 を 配列 に 入れ て お く 
話 チェ ッ ク ボ ックス の 数 だ け 繰 り 返 す 
医 「checked」 プ ロ パ ティ が [true」 の 場合 は 選択 され て いる の で 選択 項目 を 追加 表示 する 


@ 頂 個人 調べ る 対象 と な る チェ ッ ク ボ ックス の ID 名 を 配列 に 入れ て お く 


チェ ッ ク ボ ックス の ON/OFF の 状態 は 、「checked] プ ロ パ ティ で 取得 する こと が で きま す 。 「checked] 
プロ パテ ィ が 「true」 で あれ ば ON、「false] で あれ ば OFF に な り ま す 。 複数 の チェ ッ ク ボ ックス を 調べ る 場合 


に は 、 あ ら か じ め 調 べ る チェ ッ ク ボ ックス の ID 名 を 配列 内 に 入れ て お きま す 。 配列 の 数 だ け 繰 り 返 し チェ ッ 
ク を 行う こと で 、 ど の チェ ッ ク ボ ックス が ON に な っ て いる か 調べ る こと が で きま す 。 











テー ふい | 邊 EO0- ヨ 1dVHO 







チェ ッ ク ボ ックス が ON に な つっ たら 
テキ スト フィ ー ル ド を 表示 する 








ー ふ | 委 EO-d ヨ 1dVHO 








ます 。 
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w 区 | 欠 vascnpt sample 


る | COmesorpt sam 5 |s| xl ue 906593 5 


| | 食 ・ 団 ・ 四 ・ 革 ペー ジ の て 








5 本: 
区 と TIPE 58 WS In 「Pxplorer ca っ ュー ーー ニー 
(る) の 下 大 CyavaScript-Samp <| な | x uive search < 
an 4 


守 区 @ avescrpt Sampe | | 杉 ・ 加 ・ 提 < 本 ペー ジ 9 マ 




















庫 コ ンピュータ | 介 ー ド : 交 上 | アン ケー ト 


チェ ッ ク を ON に する と … 国 見 を W く 


テキ スト フィ ー ル ド 
が 表示 され る 





凍 コン ピュ ー タ | 保護 モー ド : 無効 


ReWXe 事 we 当 目 用 目 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 

<me ヒ a hh 上 上 わ -eGqdu1 ユ Y= "で On 七 G6n モ 上 ype" ConEen セ = "上 Gex 七 /htm] : 

CharSeG キ =utF-8"> 

< モ ュ 1 モ 上 1e>JavaSor エ ip 上 Samp1e</ 上 ヒュ 1e> 

<1ink re1="styleshee ヒ " type="Eex モ /css" hreF="matim.CSS" 

media="a11 "> 

< く SCr1ip type="Eex / avaSC と て 1D ヒ "8 て C= "matn . 8 "></ SC エ 1D ヒ > 


</head> の 


< くわ body テ > 
<h1> ア ン ケ ー ト </h1> 
<Form aC 上 1on=" ./enqd.C9g1" method= "ge 上 " 1d="mainForm" 
name= "ma1inForm"> 
<1abe1><inpu type="checkbox" 1qd="ocheockCmE" name= "cheokCmE"> 
意見 を 書く </ 1abe ユ ><b エ > 
<textarea 1d="uCommen" name="uCommenE "></texEarea> 一 視 
</ Form> 
</body> 
</htm1> 


頭 チェ ッ ク さ れ た 際 に 表示 され る テキ スト フィ ー ル ド に は ID 名 を 指定 し て お く ( ス タイ ル シ ー ト で 非 表 示 に し て お く ) 


SeIXYemse ョ 当 目 用 | 本 和 輝 mainjs 


window.on1oad = Funotion( ) { 
document . getE1emenByTdq ( "checkCmEt" ) .onc1iock = Funotion( ) { 
if (this.checked) {一 名 
documen . getE1emenEtBy エ Tdq ( "uCommenE" ) . Sty1e.disp1ay = "bl1ock" : 
})e1se{ 
document . getE1ementByTd ( "uCommenE" ) . Style.display = "": 





} 


} 


頭 チェ ッ ク ボ ックス が クリ ッ ク さ れ た と き に 選択 され て いる か どう か に 応じ て スタ イル シー ト の 「display」 に 表示 方 法 を 設 
定 す る 


@ 損 3 計 】 映 租 テキ スト フィ ー ル ド の 表示 / 非 表示 は 「display」 プ ロバ ティ を 操作 する 


チェ ッ ク ボ ックス が ON に な っ た 場合 の み 、 テ キス ト フ ィ ー ル ド を 表示 する に は 、「display」 プ ロ パ ティ を 操 
作 し ます 。 チェ ッ ク ボ ックス が ON に な っ た ら 、 テ キス ト フ ィ ー ル ド の 「display」 プ ロ パ ティ に 「"block"」 の 文 
字 を 設定 し ます 。 これ で テキ スト フィ ー ル ド が 画面 上 に 表示 され ます 。 逆 に チェ ッ ク が OFF に な っ た 場合 に 
は 、「display」 プ ロ パ ティ に 「"」( 空 文字 ) を 設定 し ます 。 







(@'j[WiillW ペー ジ や エレ メン ト の アク セス ブロ ッ ク 
ペー ジ 全 体 や 特定 の ブロ ッ ク や エレ メン ト だ け ア クセ ス さ せ た く な い ( ア クセ ス ブ ロ ッ ク ) 場 合 が あり ます 。 


その よう な 場合 は 、jQuery を 利用 し た 次 の ライ ブラ リ を 利用 する と 便利 で す 。 これ は ペー ジ 全 体 を アク セ 
ス ブ ロ ッ ク す る だ け で な さく 、 特 定 の ブロ ッ ク や エレ メン ト だ け を アク セス ブロ ッ ク す る こと が で きま す 。 


http://malsup.com/jquery/block/ 








ビー ふ | 0 -d ヨ 1dVHO 







eeN 間 昌 | 





し 」HApreeosr| jo4s 








チェ ッ ク ボ ックス が ON に な っ た ら 
テキ スト フィ ー ル ド へ の 入力 を 許可 する 





こ で は 、 チ ェ ッ クボ ックス が ON に な っ て いる と きだ け 、 テ キス ト フ ィ ー ル ド へ の 入力 を 許可 する 方 法 に つい 






































ーー て 解説 し ます 。 
ト < )ー cmscrprsamp ・| 々 xls 
2 の @ Javascrpt sampl に ュ | 偽 ・ 回 -・ 思 ・ は ペー ジ (") > 
上 ユー ザー 登録 

o 上 この Web サ イト 内 の 情報 の 転載 を 茜 止 し ます 。 

アア 

記 同意 する 

メル アァ FL ス 1N_。 

〇 

て っ 

に 

ジグ 

オ 

| 

ム 











部 コン ピュ ー タ | 保護 モー ド : 無効 


チェ ッ ク が OFF だ と 、 
テキ スト フィ ー ル ド に 
入力 で き な い 





チェ ッ ク を ON に する と 、 
テキ スト フィ ー ル ド へ の 
入力 が 可能 に な る 









SEI = ェ な X 昌 IESm 



























区 < 空 | 暫 avaScrpt Sample "一 PP 
| ユー ザー 登録 
1 この Web サ イト 内 の 情報 の 転載 を 革 止 し ます 。 
町 了 二 お 0c 本 
メー ル ア ド レス : yoshi@abcde.cojp T 
本 
時 10096 ママ MM 


剖 コン ピュ ー タ | 保護 モー ド : 無効 


1SOURCE CODE | 目 較 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 


<htm1] > 
<head> 


<meta http-equ1 マ = "ContenE-type" ConEen セ ="Eext/htm1: 


CharSeG キ =utF-8"> 


< ヒュ 上]1e>JavaSc エ 1p Samp1e</ ヒ 1 ュ ヒ 1]e> 
<1ink re]="sty1eshee" ype="ex モ /css" hreF="main.Css" 


med1ia="a11 "> 


<8C エ 1Dp 上 上 yDe=" 七 Gx 七 / る で aSC エ 1 ユヒ " S エ で ニ 


</head> 


"main . ]S "></ SC エ 1D ヒ > 


の 


<b わ od アテ 
<h1> ユ ー ザ ー 登 録 </h1> 
この Wejb サ イト 内 の 情報 の 転載 を 禁止 し ます 。 <b エ > 
<Form acion=" ./end.Cg1" method= "ge 上 " 1d="mainForm" "。 





name= "ma1tnForm"> を 
<1abe1 ユ ><1npuE て type="ocheckbox" 1d="checkAcoep モ " き 。 
name= "checkAocoep "> 同意 する </ 1abe1]><b エ > * ご ( 硬 中 
メー ル ア ド レス :<inpu 上 ype="E 上 ex 上 " 1d="uCommen" 
name="uCommenE" disab1ed> ょ マツ IL 

</ Form> 

</body> 
</htm]> 


頭 チェ ッ ク さ れ た 際 に 入力 が 許可 され る テキ スト フィ ー ル ド に は ID 名 を 指定 し 、 ま た 、「disabled」 と し て 入力 不可 に し て 
お く 





ReWNemee 当 目 用 | 本 SS 二 半 輝 main.js 


window.on1oad = Funoction ( ) { 
document .getE1ementByTdq ( "cheockAccep" ) .onc1iok = Funotion( ) { 
documen . getE1ementByTd ( "uMai1" ) .disab1ed = !this .checked: 一 名 
} 
} 


テー ふ AN 委 EO-d ヨ IldVHO 


頭 チェ ッ ク ボ ックス が クリ ッ ク さ れ た ら テ キス ト フ ィ ー ル ド の 「disabled」 プ ロ パ ティ に 「true」 ま た は 「false」 を 設定 する 





(@⑯7j 抽 1 遇 秀 チェ ッ ク ボ ックス の 状態 を 調べ て テキ スト フィ ー ル ド の 「disabled」 プ ロ パ ティ に 設定 する 


チェ ッ ク ボ ックス に チェ ッ ク が 入っ た 場合 の み テ キス ト フ ィ ー ル ド へ の 入力 を 許可 する に は 、「disabled] 
プロ パテ ィ に 「false」 を 設定 し ます 。 

サン プル で は チェ ッ ク ボ ックス の 選択 状態 を 反転 させ た 状態 を 設定 し て いま す 。 チェ ッ ク ボ ックス が ON 
の 場合 に は 「true]」 な の で 、 こ れ を 反転 させ た 「false」 が テキ スト フィ ー ル ド の 「disabled]」 プ ロ パ ティ に 設 
定 され 入力 が 可能 な 状態 に な り ま す 。 チェ ッ ク ボ ックス が OFF(false) の 場合 に は 「true」 が テキ スト フィ ー 
ルド の 「disabled] プ ロ パ ティ に 設定 され る こと に な り ま す 。 





(@'S[iill prototype.js ラ イブ ラリ を 利用 し た 空欄 チェ ッ ク 


prototype.JS ラ イブ ラリ に は 、 フ ォ ー ム の エレ メン ト の 空欄 チェ ッ ク を 行う メソ ッ ド が 用 意 さ ご れ て いま す 。 
空欄 チェ ッ ク は 「Field.present()」 で 行い 、 パ ラメ ー タ に チェ ッ ク し た い テ キス ト フ ィ ー ル ド の ID 名 また は 
エレ メン ト を 指定 し ます 。 パラ メー タ は 「,」 (カン マ ) で 区 切っ て 複数 指定 する こと が で きま す 。 
「Field.present()」 の 戻り 値 が [true」 で あれ ば 指定 され た すべ て の テキ スト フィ ー ル ド は 入力 され て いて 、 
「false] で あれ ば 入力 され て いな い ( 空 欄 が あっ た ) こ と に な り ま す 。 あと は 、 戻 り 値 を 調べ て 処理 を 分 けれ 
ば よい で し よ ょ う 。 


















ESSINNKGMNN 較 [L_」CHAPrER-o3 | jo4z 


04Z チェ ッ ク ボ ックス の ON/OFF に 応じ て 
テキ スト フィ ー ル ド を 追加 / 削 除 す る 








ここ で は 、DOM で 利用 で きる メソ ッ ド を 使っ て 、 チ ェ ッ クボ ックス を ODN に し た ら テ キス ト フ ィ ー ル ド を 追加 し 、 
ーー OFF に し た ら 削 除 する 方 法 に つい て 解説 し ます 。 









Live Search 了 2 


に 










| comesarrs ェ る | ※ 





@saptsampe | | 人 Q・ 回 ・ 加 =<. は ペー ジ ( ぴ ) < 





JavaScrpt を 利用 し て 、 チェ ッ ク ボ ックス の ON/OFF で テキ スト フィ ー ル ド の 追加 と 削除 を 行っ て 
いま す 。 


隔 同意 し て メー ル ア ド レス を 登録 する 









PX で: FigaveSorpt 53: | っ | ] Le Sara @ 
| | 食 ・ 団 ・ 四 ・ 革 ページ (@) マ 


JavaScnpt を 利用 し て 、 チェ ッ ク ボ ックス の ON/OFF で テキ スト フィ ー ル ド の 追加 と 削除 を 行っ て 
いま す 。 


な 内 | wesoksampe 








ーー 委 EO- ヨ 1dVHO 

















凍 コン ピュータ | 保護 モー ド : 無効 。 
同意 し て メー ル ア ド レス を 氏 録 する 


チェ ッ ク を ON に する と テキ スト 
フィ ー ル ド が 追加 れ 、 チ ェ ッ ク 
を OFF に する と テキ スト フィ ー 
ルド が 削除 され る 





凍 コン ピュ ー タ | 保護 モー ド : 無効 


ReiWXeee 可 当 目 用 用 巴 誠 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 

<meta htp-equ1 マ = "ConEen ヒ -type" conEen セ = " モ ex 上 /htm] : 

で harSe ヒ =utF-8"> 

< 上 ュ 1 上 1e>JavyaSo1ipt Samp1e</ ヒ 1 上 1e> 

<1ink re1="styleshee" ype="texE/css" hreF="ma1in.oCss" 

media="a11 "> 

<8C エ 1p ヒ 上 上 type= "xxE / JaVaSC て 1D ヒ " 5S エ C= "matm .S "></ SC エ 1p ヒ > 


</heaqd> の 








< くわ ody テ > 
avaScrip て を 利用 し て 、 チ ェ ッ クボ ックス の ON/OFF で テキ スト フィ ー ル ド の 追加 と 削除 を 行っ て いま す 。 
<Form acion=" ./enq.Cg1" method= "ge 上 " 1d="ma1nForm" 
name= "ma1nForm"> 
<1abe]><inpu type="ocheokbox" 1d= "checkAccep 上 " 
name= "checkAccep "> 同意 し て メー ル ア ド レス を 登録 する </ 1abe1 ユ ><b ェ > = 
< く d ュ で 1d="CF1e1d"></d ュ > 一 表 
</ Form> 
</body> 
</htm1 > 


台 | チェ ッ ク の ON/OFF に 応じ て 追加 / 削 除 す る テキ スト フィ ー ル ド の 領域 を 用 意 する 


eXgge 可 委 邊 用 上 EYEE 商 凍 ゆ mainjjs 


window .on1oad = Function( ) { 
document . getE1ementByTqd ("checkAcoept" ) .onc1ick = fFunoction( ) { 
if (this.checked) { 
Ya 1nputTag = document .createE1emen ( "input") : 
1nputTag .t 上 ype = "texE": 
inputTag.1d = "uMai1": 
inputTag .name = "uMai1": 
document . getE] emen モ ByTd ( "cFie1d" ) .appendChi 1d ( inputTad) : 
})e1set 
Yar FChi1d = qdocument . getE1ementByTd ( "CcFie1d" ) .EirstECh11qd: 
document . getE1emenEBy エ Td ( "cFie1d" ) .removeChi1qd (EChi1d) : a 





} 


台 チェ ッ ク ボ ックス が ON の 場合 に は <input> タ グ を 生成 し 、ID 名 が 「cField」 の 領域 に 追加 する 
放 削除 時 に は ID 名 が 「cField」 の 領域 の 最初 の 子 ノー ド を 「removeChild()」 を 使っ て 削除 する 


(@⑯ 相 9】 映 上 appendChild()」「removeChild()」 で テキ スト フィ ー ル ド の 追加 / 削 除 を 行う 


DOM で チェ ッ ク ボ ックス に チェ ッ ク が 入 つ た 場合 の み テ キス ト フ ィ ー ル ド を 追加 する に は 、「appendChild 
()」 を 使い ます 。 「appendChild()」 で 追加 する <input> タ グ は 、「document.createElement()」 で 生成 
し ます 。 生成 し た 後に 必要 な プロ パテ ィ を 設定 し ます が 、 必 ず 「type」 プ ロ パ ティ か ら 設 定 し ます 。 他 の プロ 
パテ ィ か ら 設 定 す る と Internet Explorer で は 正しく 反映 され ず 、 動 作 し な いこ と が あり ます 。 

追加 し た テキ スト フィ ー ル ド を 削除 する に は 、「removeChild()」 を 使い ます 。 追加 され た テキ スト フィ ー 








ルド は サン プル で は 「<div id="cField">」 の 最初 の 子 ノ ー ド な の で 、「document.getElementByld 
("cField").firstChild]」 と し て アク セス する こと が で きま す 。 この 子 ノ ー ド を 「removeChild()」 の パラ メー 
タタ に 指定 する こと で テキ スト フィ ー ル ド を 削除 する こと が で きま す 。 








テー 上 EO -3 ヨ 14YHO 










CHAPTER-03 P 048 


セレ クト メニ ュー で 選択 され た 
項目 を 取得 する 











ここ で は 、 セ レク トメ ニュ ー で 選択 され た ペー ジ 名 (項目 ) に 応じ て 、 対 応 す る ペー ジ を 表示 する 方 法 に つい 
本 | て 解説 し ます 。 
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テー ふり 上 E0- 紀 1dVHO 











部 コン ビ ピュータ | 保護 モー ド : 





ウェ ブ イメ ー ジ ニュ ー ス 地図 グル ー プ mores 





@ ウェ ブ 全体 か ら 検索 @ ら の 7 

















選択 し た ペー ジ に 移動 する 
New 仲間 と 文書 を 共有 で きる Docs & Spreadsheets を お 試し 下さ い 








償 イン ター ネッ ト | 保護 モー ド : 有効 時 10096 ・ 





還 9@9 り 当 目 用 上 index.htm 


<!DOCTYPBE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN "> 
<htm1] > 
<head> 

<me ヒ a hh 上 上 りー-Gqu1 マ = "COn 上 @Gn ヒ 上 yyDe" ConEen ヒ = "ex 七 /htm] : 

CharSe ヒ =uF-8"> 

< 上 ヒュ 上 1e>JaVaSCrip 上 Samp1e</ ヒ 1 上 ]e> 

<1ink re]="sty1eshee ヒ " tyDe=" モ ex モ /css" hreE="main.css" 

media="a11"> ( 

ぐ 8SC エ 1Dp 上 上 yYDe= " 七 @ 訪 / aaSC エ 1 エ D 七 " 5 エ o= "matn . 8 "></ SC エエ や セ > 


</heaqd> の 


< くわ ody テ > 
下記 の メニ ュー で 選択 し た ペー ジ に ジャ ンプ し ます 。 <b ェ > 
<Form acC1on=" ./]ump .Cd1" method= "get" 1qd="mainForm" =。 
name= "matnForm"> 
<se1ect 1q="]ump"> 一 名 
<option Ya1ue= "htp : / /www . yahoo . Co . Jp/ ">Yahoo ! </ opt1on> 
<option Ya1ue= "hp : / /www . goog1e . Co . Jp/ ">Goog1e</ opt 上 ion> 
<opt1ion Ya1ue= "hp : / /www . OpenSpc2 . ord/ ">OpenSpace< / Op 上 1on> 
</ se1ec キ > 
</fForm> 
</boQdy> 
</htm1> 


頭 セレ クト メニ ュー に ID 名 を 指定 する 


Realee 可 当 目 用 用 本 mainjs 


window .on1oad = fFunotion ( ) { 
documen . getE] ementByTq ("ump" ) . onchange = funoction ( ) { 一 名 
1ocation.href = て his.va1ue: 一 話 
} 





} 


頭頂 目 が 選択 され た 場合 に 処理 する よう に イベ ント ハン ドラ を 設定 する 
話 選択 項目 の 「value」 プ ロ パ ティ を 読み 出し 、 ペ ー ジ の UHL と し て 設定 する 





(@ 損 3 人 】 昌 位 [thisS.value」 で 選択 項目 の 内 容 を 読み 出す 


セレ クト メニ ュー で 項目 が 選択 され る と 、「onChange」 イ ベン ト が 発生 し ます 。 選択 され た 項目 の 内 容 
を 読み 出す に は 、 セ レク トメ ニュ ー の 「value」 プ ロ パ ティ を 読み 出し ます 。 サン プル で は 、「this.value」 と し 
て セレ クト メニ ュー で 選択 され た 項目 の 内 容 を 読み 出し て いま す 。 読み 出し た 内 容 を 「location.href」 に 
設定 する と 、 指 定 さ れ た ペー ジ を 表示 する こと が で きま す 。 


(Ii 入力 フォ ー ム の 特定 の エレ メン ト だ け 取 得する 


prototype.jS ラ イブ ラリ に は 、 入 力 フォ ー ム の 特定 の エレ メン ト だ け 取 得する メソ ッ ド が 用 意 さ れ て いま 
す 。 「Form.getlInputs()」 で 最初 の パラ メー タ に 入力 フォ ー ム の ID 名 、2 番 目 の パ ラメ ー タ に 取得 し た い 
種類 を 指定 し ます 。 この 種類 は 、<input> タ グ の 「type」 属 性 で 指定 され て いる 値 に な り ま す 。 
「Form.getInputs()」 と 「each(O」 を 組み 合わ せる こと で ミス の 少な い プ ログ ラム を 作成 する こと が で き 
る よう に な り ま す 。 








記 ー ふ | 削 EO-4 コ 1dVHO 

















Sake 男 昌 [し CHAeresos+[ lozs 
0 友 【@』 セレ クト メニ ュー 項目 を 追加 する 











ここ で は 、 ペ ー ジ が 読み 込ま れ た タイ ミン グ で 、 セ レク トメ ニュ ー 項 目 を 追加 する 方 法 に つい て 解説 し ます 。 






























= Ka に 昌 StP 
て 京 。 ( ) う = 引 COaveScrpt-Sample\03. | ヶ xl Le searh 
党 | 弧 wesgptsampe | | 食 ・ 回 直上 は ペー ジ の て 
下記 の メニ ュー は JavaScnpd こ よっ て 追加 され て いま す 。 
Yahoo! ェ 

の 
SE 
テ 
で 
| 
「Tm 
(で 
て う 
王 茹 ! 
の 
| 
ム L. コン ピュ ー タ | 保護 モー ド : 












ペー ジ が 読み 込ま れ た 
と き に セレ クト メニ ュー 
の 項目 が 追加 され る 

ウェ ブ イメ ー ジ 


@ ウェ ブ 全 体 か ら 検索 @ 日 本 語 の ペー ジ を 検索 





ニュ ー ス 地図 グル ー ブ mores 






















Newi 仲間 と 文書 を 打 有 で きる Docs & Spreadsheets を お 試し 下さ い 

















@ イン ター ネッ ト | 礎 護 モー ド : 有効 吸 1009% ・ 





K@)0I@ 表 ⑳@, 


是 目 用 用 馬 央 珍 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL. 4.01 TransiEiona1 / /EN"> 
<htm1] > 
<head> 
<mea h ヒ tp-equ1 マ = "Conten ヒ -type" conEen キ ="Eex モ /htm1i 
Cha エ SG ヒ =u 上 F-8 "> * ご 
< モ ュ 1 上 1e>JavaSor1p ヒ Samp1e</ 二 1 上 1e> 
<1ink re1="sty1esheet" type="Eex/css" href="matin.Css" 
media="a11"> ぐす " の 





こく SC エ ュ 1p ヒ 上 上 yDe= "上 G メ 上 / る びる SC エエ p ヒ "8 エ C= "ma1in .S "></ ご C エ ュ エロ ヒ > 
</ head> 
<body テ > 
下記 の メニ ュー は JavaSc て ip 上 に よっ て 追加 ご れ て いま す 。 <b ェ > 
<Form ac 上 ion=" ./]ump .Cdg1" method= "det 上 " 1d="mainEForm" 
name= "matnForm"> 
<se1ect 1q="]jump"></se1ect> 一 罰 ドー 
</ form> 
</body> 
</htm1]> 





攻 | セレ クト メニ ュー に ID 名 を 指定 する 





Sea 事 9e9g 当 目 用 目 main.js 


window.on1oad = Function( ) { 
Ya se1Ob] = qdocument .getE1ementByTqd ("ump" ) : 
Yar optionData = [ 
{ text: "Yahoo!", Ya1ue : "http: / /www .yahoo . co. Jp/"} , 
{ text: "Goog1e", Ya1ue : "htp : / /www .goog1e . co. Jp/"} , 
{ text : "OpenSpaoe" , Ya1ue : " http : / /Www . OpenSpC2 . or9/ "} 


テー ふ | 上 EO- ヨ 1dVHO 


] 
For (Var =0: 1<optionData . 1ength: ュ ++) { 
se1Ob] . options [1] = 
new Optton (optionData [1] .tex モ , optionData [1] .va1ue) : 
} 
Se1Ob] . onchange 
1ocaton .hreE 


Funoction ( ) { 一 婁 
this .Ya1ue: 


} 


台 追加 する セレ クト メニ ュー の 項目 を 連想 配列 (/ ッ ッシュ) と し て 用 意 する 
話 「new Option()」 と し て 項目 名 と 「value」 プ ロ パ ティ を 指定 し て 生成 する 











⑲ 高 9】 映 租 セ レク トメ ニュ ー で 表示 され る 項目 を 追加 する に は 「new Option()」 を 使う 


セレ クト メニ ュー で 表示 され る 項目 を 追加 する に は 、「new Option()」 と し て 追加 する 項目 名 と 「value」 
プロ パテ ィ 値 を 設定 し ます 。 複数 の 項目 を 追加 する 場合 に は 、 配 列 な ど に 追加 項目 を 入れ て お き 繰 り 返し 追 




















加 す る よう に し ます 。 また 、 項 目 を 追加 する 際 に は 、 何 番目 の 項目 に 追加 する か を 指定 する 必要 が あり ます 。 










記 一 | 委 E0-3 ヨ IdVHO 








SNE sl 旨 CHAPTER-03 050 


050 セレ クト メニ ュー 項目 に 応じ て 別 の 
セレ クト メニ ュー 項目 の 内 容 を 切り 替え る 


える 方 法 に つい て 解説 し ます 。 



























で reescrsenee ・| ッ |x weson 


作ら 申せ こら の 2 の < 





OS の 調査 


〇 の の: 大 Cgavascript-Samplewo3. <| ヶ | x 昨 uive search 


守 | 欠 vescptsempe | 信 ・ 回 っ ・ は ページ の て ・ 


OS を 林 択 し て くだ さい * < 
OS を 選択 し て くだ さい 


Windows 
し で | 

























一 方 の セレ クト メニ ュー を 選択 する と … 


も う 片 方 の 項目 が 状 
況 に 応じ て 変化 する 





ReWXq 事 eg 当 肖 上 上 index.htm 


< く !DOCTYPE htm] PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm] > 


<head> 
<meta hp-@equ1 マ = "oonten ヒ -tyjpe" ConEen ヒ ="ex /htm1 : $、 
で harSe ヒ =uEE-8"> +ー" 


< ヒュ 1 上] e>JavaSorip Samp1e</ 上 1 上 1]e> 
<11nk re]="sty1eshee" ype="tex モ /css" hrefF="main.oss" 
media="a11 "> 
< く 8SC1p type= "上 ex /aVaSC エ 1D 七 " 8 エ o="ma1n .]S"></ SC エ 1D セ > 
</head> 
< く body> 
<h1>OS の 調査 </h1> 
< く FEorm acCion=" ./enq.Cg1" method= "9e 上 " 1d="mainForm" 
name= "mainForm"> 
<se1ec 1q="se1Main"> 一 視 
<option Ya1ue=" ">OS を 選択 し て くだ さい < / op 上 1on> 
<option Ya1ue="Win ">W1ndows</ op 上 1on> 
<opEionm Ya1ue="Mac">Mac OS</opion> 


< く / Se1eo ヒ > の 


<Se1eo 1q="se1Sub"></se1eo> 一 衣 
</ Form> 
< く /bod ア > 
</htm1] > 


頭 セレ クト メニ ュー に ID 名 を 指定 する 
話 内 容 が 変更 され る セレ クト メニ ュー の ID 名 を 指定 する 


Seeeweg 当 目 用 用 本 RS 菩 前 参 main.js 


window.on1oad = Funotion( ) { 
documen .detE] ementByTd ( "se1Main" ) .onchange = fFunotion( ) { 

var se1No = this.se1eoctedTndex : 一 罰 

Ya se1Ob] = qdocument .getE]ementByTqd ("se1Sub" ) : 

var optionData = [[ 

折 下 
{ text: "95-Me", Val1ue: "95"}), 

text:"2000/XP", Ya1ue: "2000"}, 
text : "Vista" , Ya1ue: "Vista"} 





{ 
{ 
],【 
{ text: "OS 9", value: "9『), 
{ text:"OS 又 ", va1ue: "10"} 
] 
] 
whi1e(se1Ob] .hasChi1qNodes ( ) ) { に 」 
Se1Ob] . removeChi 1d (se1Ob] . FirstChi1d) : 
} 
For (Var 1=0: <optionData [se1No] . 1ength: ュ ユ ++) { 
Se1Ob] . options [1] = new Option (optionData [ se1No] [1] .tex, 
optionData [se1No] [1] .Ya1ue) : 


} 


に 


… 選 択 さ れ た セレ クト メニ ュー の 値 を 読み 出す 

… 追 加 す る 項目 名 と 「value」 プ ロ パ ティ の 値 を 配列 に 用 意 し て お く 

… 追 加 前 に は 既存 の 項目 を 全て 削除 する 

… 選 択 さ れ た セレ クト メニ ュー の 値 に 応じ て 配列 内 容 を 読み 出し 、 セ レク トメ ニュ ー の 項目 と し て 追加 する 


@ 加 滑 M9】 章 條 選択 状況 に 応じ て 配列 に 追加 項目 な ど を 用 意 し て お く 


セレ クト メニ ュー で 選択 され た 項目 に 応じ て 、 別 の セレ クト メニ ュー の 内 容 を 変更 する に は 、 あ ら か じ め 
配列 に セレ クト メニ ュー の 項目 を 用 意 し て お きま す 。 選択 され た 項目 の 選択 番号 に 応じ て 配列 内 容 を 読み 





出し 、「new Option())」 で セレ クト メニ ュー の 項目 を 追加 し ます 。 た だ し 、 選 択 項目 の 総数 が 変化 する よう 
な 場合 に は 、 必 ず 選 択 項目 を 削除 し て か ら 追加 する よう に し ます 。 削除 し な い 場 合 は 、 以 前 の 項目 が 残っ た 
まま に な り ま す 。 














テー へ Ah 眼 と 0 -4 ヨ IdVYHO 






SEcTION | 剛 


ボタ ン を クリ ッ ク す る た びに 


05 1 異な る 処理 を ラン ダム に 行う 






ビー ふ 」 上 0 - ヨ 14VHO 





20 








ここ で は 、 ボ タン を クリ ッ ク す る た びに 異な る 通貨 単位 で 表示 され る よう に する 方 法 に つい て 解説 し ます 。 


Ko cuesorpt Samplew03. <| な | x | uive Search 


次 次 な の asoptsompe | | 合っ 還 ・ 介 ・ - き ページ の ・ 


















当選 金額 


全額: 45687 瑞 ) 





ゎ ・| 









つの 2 < の "eeer someos -| 々 |x esera 
| | 食 ・ 回 晶 ・ は ペー ジマ 






次 交 | @@ asmpt Sample 












当選 金額 


金額: 45687 


当 可 全 守 は 4568 ド ル で す 































Kei@ 削 


| Comescrpksempew | | X lesaro 
詩人 9mesomksampe | | 人 ぬこ 回 名 こら ペー ジ の ・ 










当選 金額 


金額: 45687 


当選 殖 剛 は 43687 円 で す 








? 。 e 3 "x 
【@ 今 滞 絹 C:Javascript-Samplew03. ・| な | x 上 uive searh ェ ・ 


癌 六 |@vespksampe | | 人 ぬ ・ 回 中 は ペ ー ジ の て 


















当選 金額 


金額: 45687 柚 ! 


当選 全 補 は 45687 ポ ンド で す 















ボタ ン を クリ ッ ク す る 度 に 異な る 
単位 で の 金額 が 表示 され る 








ReiWemeeg 当 目 用 用 馬 軸 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta h 上 上 りー-@Gqu1 マ = "で Con 七 e@n ロ モ - 上 ype" Conten ヒ =" モ ex 上 /htm1: 
CharSe キ =utF-8"> 
< ヒュ 上 1e>JavaSo て ip Samp1e</ 上 1 ュ ヒ 1e> 
<1ink re]="sty1esheet" type="EexE/ocss" hrefF="main.cs8" 
med1ia="a11 "> を 
< く 8C エ 1p 上 上 ype=" ヒ ex / Ja マ aSC エ 1D ヒ "SC= "ma1m .S "></ SC エ 1Dp キ > 


</head> の 


< わ bod ア > 
<h1 > 当選 金額 </h1> 
<Form ac 上 ion=" ./enq.Cg1" method= "ge ヒ 上 " 1d="mainForm" ゃ 
name= "matnForm"> oe 
金額 :<1nput type=" て ex 上 " name="p エ ice" 1d="price" Ya1ue="215"> 
<1nmpu 上 上 ype= "but 上 Eon" 1d="SeEBuEton" Ya1ue=" 実行 "> 
</ Form> ( 村 * 
< く d1V 1d=" エ eSu1 ユ 上 "></1 マ > 
</body> 
</htm1l> 





Reeleej 当 目 用 用 本 RS 表 交 mainjs 


window.on1oad = funotion ( ) { 
document .getE1ementByTq ( " set 上 ButEon" ) .onc1iock = fFunotion( ) { 
Yar n = Math.F1]oor (Math . random ( ) * rnqdFunoc . 1ength) : 
ェ ndFunc [nm] ( ) : 司 
} 
} 
Yar rndFunc = [ 
Function ( ) { 一 婁 
Yar pr = documen .getE1ementByTq ( "Dr1ce" ) .Ya1ue: 
document . getE] emenEByTd ( "resu1 上 " ) . innerHTML, = "当選 金額 は "+p ェ + "円 で す ": 


テーANI 委 EO-d コ 1dVHO 


すけ, 
Function ( ) { 一 回 
Ya pr = documen .qdetE1emenEByTd ( "D エ 1Ce" ) .Va1u@: 
document . getE1ementByTd ( "resu1" ) .1nnerHTML, = "当選 金額 は "+p ェ + "ドル で す ": 
} , 
Function ( ) { 一 記 
ar pr = qooumen .getE1ementByTdq ( "price" ) .Va1ue: 
document . getE1ementByTd ( "resu1 モ " ) . 1innerHTMT, = "当選 金額 は "+p ェ + "ポン ド で す ": 
上 


ェ つ 


… 求 め た 乱数 値 を 配列 の 添字 と し て 関数 「rndFunc」 を 呼び 出す 

… テ キス ト フ ィ ー ル ド に 入力 され た 値 に 「 当 選 金 額 は 円 で す 」 の 文字 列 を 追加 し て 表示 する 

… テ キス ト フ ィ ー ル ド に 入力 され た 値 に 「 当 選 金 額 は ー ド ル で す 」 の 文字 列 を 追加 し て 表示 する 

… テ キス ト フ ィ ー ル ド に 入力 され た 値 に 「 当 選 金 額 は ー ポ ンド で す 」 の 文字 列 を 追加 し て 表示 する 





(@ 人 9】 量 租 相 に 実行 する 関数 を 入れ る 


ラン ダム に 実行 する 関数 を 変更 する に は 、 あ ら か じ め 配 列 に 関数 を 定義 し て お きま す 。 JavaScript で は 
配列 に 関数 を 入れ る こと も で き 、 実 行 す る 際 に は サン プル の よう に 「rndFunc [n] ()」 と し て 呼び 出す こと 


が で きま す 。 














SE 旧 CHAPTER-03 052 


なめ EE 


力 さ れ た 値 の み 加 算 す る 





1I 


ビー ふせ | 委 EO-3 ヨ 1dVHO 











ここ で は 、 特 定 の 条件 に 合う テキ スト フィ ー ル ド に 入力 され た 値 の み 加 算 し 、 合 計 を 別 の テキ スト フィ ー ル ド 








計算 ボタ ン を クリ ッ ク 商品 の 合計 金額 が 


する と … 





に 表示 する 方 法 に つい て 解説 し ます 。 








つの OBwmi51OEBanaW0 -|9|x lu seer - p -| 





3y ぷ |9esorptsampe | に 信 < ッ 生 ・ は ペー ジ の ゆー 





SOURCE C 





























|x lesera 





:\JavaScript-Samplew03. < 





商品 i: 1 個 * 300 ! ーー 
良 菩 - 六 | 弧 wesotptsampe | | 谷 ・ 還 - 呆 こ 叶 ペー ジマ 
商品 z: 2 個 * 100 

ら 商品 1 個 <300 

商品 3*: 個 * 150 由 

円 


商品 2: 2 個 * 100 
円 


商品 : 個 < 150 





凍 コン ピュ ー タ | 保護 モー ド : 無効 。 | 100% 
凍 コン ピュー タ | 保護 モー ド : 無効 


表示 され る 


@ 当 目 上 用 馬 I 唄 際 index.htm 





<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 





<htm1 > 
<head> 
<meta htp-eGqu1Y= "ConEen-type" ConEen ヒ = "text/htm1: 寺 。 
CharSeG キ =u 上 FEF-8"> *+ プ 


< モモ 1e>JavaSor1p 上 Samp1e</ ヒ ュ モ 上 1]e> 
<1ink re]="sty1eshee" type="EexE/css" hrefF="main.CsS" 
media="a11 "> 
く 8SC エ ュ 1p ヒ 上 ype= " ヒ G 訪 / aaSC エ 1 わ ヒ "8 エ C= "ma1m .]S "></ SC て 1D キ > 
</head> 
<DbodY> 
<Form acoion=" ./ca1o .Cg1" method= "ge 上 " 1d="matinForm" 
name= "matnForm"> 
商品 1:<1npu type="tex モ 上 " name="num1" 1d="num1" 
va]1ue="1" gs1ze="3"> 個 X 
<1npu 上 ype= "上 GE" name="D エ 1oCe1" 1d="p エ 1oe1" 
Ya1ue="300 "> 円 <D エ > 


商品 2:<1npu ヒ ype="Eex モ 上 " name="num2" 1d="num2" Value="2" 寺 。 


8S1ze="3 "> 個 X 


の 


<1npu ヒ 上 yDe="Eex ヒ " name="p エ 1Ce2" 1d="prioce2" * い 
Va1ue="100 "> 円 <D ェ > を デブ 

商品 3:<1npu type= "exE" name="num3" 1d="num3" 851 と 6="3"> 個 X 
<1npu ype="Eex" name="p エ 1oe3" 1d="p エ 1oe3" 寺 。 
Ya1ue="150 "> 円 <D エ > の 
<1npu 上 ype="Eex 上 " name=" モ Ooa1 " 1d="Eota1" > 円 <h ロ エ > 

特 記 :<1npu type=" ヒ ex 上 " name="uSe エ Spec " 1d="uSerSDeoC "><b エ > 

ご 意見 :<1mpu 上 ype= "exE" name="u5erCommen ヒ " 1q= "usSerCommmen ">< わ エ > 

<1npu 上 ype="button" 1d= "Ca1cBut て on" Ya1ue=" 計 算 "> 

</ Form> 
</body テ > 
</htm1> 


攻 計算 する テキ スト フィ ー ル ド に は 「 名 前 番号 」 を 指定 する 


ReiWXe ヨ ee 当 目 用 用 本 RS 二 前 main.js 


window.on1oad = fFunoction ( ) 【 
document . getE1emenEBy エ Td ( "ca1cButton" ) .onc1iock = Funotion( ) { 
Yar ota1Prioe = 0: 
Eo (Var =1 : ユエ <=3: ユエ ++){ 
頭 一 var num = parseTnt (document . getE1emenEByTd ( "num"+1 ) .value) || 0: 
困 一 var pro = parseTnt (document . getE1emenEByTd ( "price"+1) .value) || 0: 
旋 一 EoEa1P エ 1Ce += num ※ D エ Oz 
} 
documen . getE] ementByTQ ( "上 ota1 " ) . マ alue = 上 ota1P ェ 1CG: 
} 





トー 


… テ キス ト フ ィ ー ル ド 名 が 「num」 と 数 値 の 1 一 3 の 組み 合わ せ の テキ スト フィ ー ル ド の 内 容 を 読み 出す (内 容 が 入力 され 
て いな い 場 合 は 0 に する ) 

… テ キス ト フ ィ ー ル ド 名 が 「price」 と 数 値 の 1 一 3 の 組み 合わ せ の テキ スト フィ ー ル ド の 内 容 を 読み 出す (内 容 が 入力 され 
て いな い 場 合 は 0 に する ) 

… 合 計 金 額 ( 単 価 X 個 数 ) を 求め る 

















@7j】 還 秀 | 名 前 番号 」 の 組み 合わ せ で ID 名 を 指定 する 


特定 の 条件 に 合う テキ スト フィ ー ル ド を 読み 出す に は 、 い くつ か 方 法 が あり ます 。 も っ と も 簡単 な 方 法 は 、 
テキ スト フィ ー ル ド の 「name」 属 性 また は 「id]」 属 性 で 名 前 と 番号 の 組み 合わ せ を 利用 し て アク セス する 方 
法 で す 。 こ の 方 法 で あめ れ ば 、「for()」 を 使っ て 簡単 に 名 前 と 番号 の 組み 合わ せ の テキ スト フィ ー ル ド を 参照 


する こと が で きま す 。 
また 、 ス タイ ル シ ー ト の クラ ス 名 を 指定 する 方 法 も あり ます 。 この 場合 は 、 正 規 表現 の 「match(O」 を 使っ 














て 対象 と な る クラ ス が 適用 され て いる か どう か 調べ て 処理 を 行い ます 。 

















テー へ AhNJ 邊 0 - ヨ 14YH つ 







SE HG N 則 CHAPTER-03 053 





フォ ー ム の 送信 ボタ ン が 
押さ れ た ら 処 理 を 行う 





ーー 上 0 -d ヨ 1dVHO 








ここ で は 、 フ ォ ー ム の 送信 ボタ ン ( 例 題 で は [登録 ] ボ タン ) が 押さ れ た ら 、 送 信 前 の 処理 を 行う 方 法 に つい て 
解説 し ます 。 


























(⑦ づ の - | 多 Cavesrpk sampevos -| ヶ |x lese pj ・| 
- 富 信 | の mesomksempe | | 合 ・ 回 5・ ゆ ペー ジウ マ 4 の で 称し ます か ? 
住所 登録 
sf | 
信 所 東京 夫 区 
2 。 
人 確認 の ダイ アロ グ が 
クリ ッ ク す る と … 表示 され る 
志 ご で 
的 卓 コン ピュ ー タ | 避 隊 モー ド : 無効 表 100% < 





1SOURCE CODE | 四 調 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm] > 


<head> 
<me ヒ ta h 上 上 D- equ1= "ConEen 上 -type" ConEen ヒ = " モ ex 上 /htm] : 
Charse ヒ =uF-8"> 
< ヒュ 上 1]e>JavaScr1ip 上 Samp1e</ 上 上 ]e> 
<1ink re]="sty1esheet" type=" 上 exE/css" hreF="main.CSS" 
med1ia="a11 "> 
く 8C エ 1D 上 上 ype= "ex / る VaSC エ 1D 上 "8S エ で = "ma1in . 8 "></ SC エエ D 上 > 
</head> 
<Dbody> 
<h1 > 住所 登録 </h1> 
<Form acC 上 1on=" ./reg1s .Cg1" method= "de 上 " 1d="mainForm" 
name= "matinForm"> ]m 
名 前 :<1npu type="Eex 上 " name="uS ら erName" 1d="u5erName ">< わ エ > 
住所 :<1npu type= "tex ヒ 上" name="uSerAqdQress" 1qd="uSerAQddresS ">< わ エ > 
<1npu type="Subm1it" Va]1ue=" 登録"> 
</ Form> 
</body> 
</htm1> 


副 入力 フォ ー ム に ID 名 を 指定 し て お く 


い @)0@ 宮 9 





@ 可 当 目 用 有 用 本 ES 衣 輝 main.js 


window.on1oad = Funotion ( ) { 
documen . getE1emenEByTdq ( "mainForm" ) .onsubmiE = Funotion ( ) {一 名 
ェ eEurn ConFirm ( "この 内 容 で 登録 し ます か ?" ) : 一 久 
} 


… 送 信 ボ タン が 押さ れる と 入力 フォ ー ム の 「submit」 イ ベン ト が 発生 する の で イベ ント ハン ドラ を 設定 する 


され れ ば 送信 し な いこ と に な る ) 


(ji3】 映 画 入力 フォ ー ム の 「onsubmit」 に 送信 時 の 処理 を 指定 する 


入力 フォ ー ム の 送信 時 に 処理 を 行う に は 、「onsubmit」 に 送信 前 の 処理 を 指定 し ます 。 サン プル で は 送 
信 前 に 確認 の ダイ アロ グ を 表示 し 、 結 果 を 「return] で 返し て し ます 。 「submit」 イ ベン ト で は 、 イ ベン トバ ハン 


ドラ か ら の 戻り 値 が 「true」 で あれ ば 送信 、「false」 で あれ ば 送信 し な いよ うに な っ て いま す 。 サン プル の よ 
うに 、「confirm()」 で の 確認 ダイ アロ グ の 戻り 値 を 利用 する と 、[OK] ボ タン が クリ ッ ク さ れ た と き は 送信 さ 
れ 、 [キャン セル ] ボ タン が クリ ッ ク さ れ た と き に は 送信 し な いこ と に な り ま す 。 





JavaScript で は 、 次 の よう に し て 関数 内 に さら に 関数 を 定義 せる こと で クロ ー ジ ャ を 利用 する こと が で 
きま す 。 クロ ー ジ ャ を 利用 する こと に より 、 グ ロー バル 変数 な ど を 利用 し た りす る こと な く 、 値 を 保持 する こ 
と が で きま す 。 これ に より 、 オ ブ ジ ェクト 情報 が 隠蔽 され る た め 、 バ グ の 軽減 に もち つ な が り ま す 。 


window.on1oad = funotion( ) { 
aCoun キ = xCounEer (0) : 
document . getE1 ementByTq ( "aBuEton" ) .onc1ick = Funotion( ) { 
document . getE] ementByTdq ( "dataVa1ue" ) .Value = aCoun 七 () : 
} 
} 
Funotion xCounter(n) { 
Yar CValue = n:  // 初期 化 
Yar counter = funotion( ) { 
cValue = cValue + 1: 
if (cValue > 9) cVal1ue = 0: 
eurn CVa1u@: 
} 
GEUu エ m COuUn ヒ G エ : 


} 


… イ ベン ト ハ ンド ラ か ら の 戻り 値 が 「true」 で あれ ば 送信 され 、「false]」 で あれ ば 送信 され な い ( 確 認 ダ イア ログ で ある 
「confirm() の 戻り 値 は 「true」 か 「false] で あり 、[OK] ボ タン が クリ ッ ク さ れれ ば 送信 、[ キ ャ ン セ ル ] ボ タン が クリ ッ ク 





テー 引当 0 -d ヨ 14VHO 





SECTION | 席 
な | ッ ョ ー 00 リセ リット ルッ クン ン が 
押さ れ た ら 処 理 を 行う 
































) ここ で は 、 フ ォ ー ム の リセ ッ ト ボ タン が 押さ れ た ら 、 リ セッ ト さ れる 前 に 処理 を 行う 方 法 に つい て 解説 し ます 。 
1 

名 前 : 鈴 林 次郎 

住所 : 東 京都 濁 | 
o 9 
に 確認 の ダイ アロ グ が 
証 ] 表示 され … 
つ ] 
ら ! 
6 ] 
つ EE 
コ 
1 
ム 

| ン [OK] ボ タン を クリ ッ ク す る と 


内 容 が リセ ッ ト さ れる 








1I 二 コン ピュ ー タ | 保 拭 モー ド : 無効 累 100% 


時 目 用 用 怠 語 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 


<htm1]> 
<head> の 


の 0IY@ 事 8@) 








<meta h ヒ 上 わ ー@Gqu1 マ = "Con モ ヒ en ヒ ーEype" Conten ヒ ="EexE/htm1: =-。 
CharSe ヒ =u 革 Fー8"> ニッ 
< モ ュ 上 1e>JavaScrip 上 Samp1e</ ヒ ュ 1E1e> 
<1ink re]="styleshee" type="ex/css" hreF="main.css" *。 
media="a11 "> 
ぐ SC エ 1Dp ヒ 上 上 ypDe= "ヒメ 上 / る VaSC エ 1D ヒ "5 エ C= "ma1tm . 8S "></ 8C エ 1 キテ > 
</heaqd> 
<body> 
<h1 > 住所 登録 </h1> 
<Form acCion=" ./regis .Cg1" method= "get" 1d="mainForm" = 
name= "mainForm"> ご |m 
名 前 :<1npu type="tex 上 " name="uSerName" 1qd="userName "><b ェ > 
住所 :<1npu type= "tex 上 " name="uSerAQddresS" 1qd="uSerAqdQreSs "><b エ > 
<1npu 上 ype="rese 上 " Ya1ue=" リ セッ ト "> 
<1npu type="submit" va1ue=" 登 録 "> 
く / Form> 
</body> 
</html > 


副 入力 フォ ー ム に ID 名 を 指定 し て お く 





SeiXa 事 %e) り 当 目 用 目 main.jS 


window.on1oad = Function ( ) { 
document .qetE1ementByTd ( "mainForm" ) .onrese 上 = Function( ) { 一 名 
Yeturn ConF1irm ( "内 容 を リセ ッ ト し ます か ?" ) : 一 話 
} 


… リ セッ ト ボ タン が 押さ れる と 入力 フォ ー ム の 「reset」 イ ベン ト が 発生 する の で イベ ント ハン ドラ を 設定 する 

… イ ベン ト ハ ンド ラ か ら の 戻り 値 が 「true」 で あれ ば 内 容 が リセ ッ ト さ れ 、「false] で あれ ば 送信 され な い ( 確 認 ダ イア ログ 
で ある 「confirm()」 の 戻り 値 は 「true」 か 「false] で あり 、[OK] ボ タン が クリ ッ ク さ れれ ば 内 容 を リセ ッ ト 、 [キャンセ ル ] 
ボタ ン が クリ ッ ク さ れれ ば 内 容 を リセ ッ ト し な いこ と に な る ) 


(@⑯ 損 39】 個 入力 フォ ー ム の 「onreset」 に リセ ッ ト 時 の 処理 を 指定 する 
入力 フォ ー ム の リセ ッ ト ボ タン が クリ ッ ク さ れ た と き に 処理 を 行う に は 、「onreset」 に リセ ッ ト 前 の 処理 を 
指定 し ます 。 サン プル で は リセ ッ ト 前 に 確認 の ダイ アロ グ を 表示 し 、 結 果 を 「return」 で 返し て し ます 。 
「reset] イ ベン ト で は イベ ント ハン ドラ か ら の 戻り 値 が 「true」 で あれ ば 送信 、「false」 で あれ ば 送信 し な い 
よう に な っ て いま す 。 サン プル の よう に 「confirm ()」 で の 確認 ダイ アロ グ の 戻り 値 を 利用 する と 、[OK] ボ 








タン が クリ ッ ク さ れ た と き に は 内 容 が リセ ッ ト さ れ 、 [キャ ン セ ル ] ボ タン が クリ ッ ク さ れ た と き に は 内 容 は リ 
セッ ト し な いこ と に な り ま す 。 
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ステ ー タ スバ ー へ の 書き 替え は 
許可 な し に で き な い 


以前 は ウィ ンド ウ の ステ ー タ スバ ー へ の 書き 込み は 、 次 の サン プル の よう に 自由 に 行う こと が で きま 
し た 。 


Se ヒ TnEerva1 (" (Funoton ( ) { window.status = new Date }) () ", 
1000): 


JavaScript で 一 番 最初 に 注目 され た の も 、 ス テー タス バー に メッ セー ジ が 流れ る と いう プロ グラ ム 
で し た 。 また 、 デ バッ グ 時 に も 値 を 表示 する 際 に 便利 な 領域 と し て 利用 され る こと も あり まし た 。 

し か し 、 現 在 で は リン ク 先 の URL が 偽装 され た りす る た め 、 ユ ー ザ ー が ステ ー タ スバ ー へ の 書き 込 
み を 許可 し な い 限 り 文 字 列 を 表示 で き な い よう に な っ て いま す 。 Firefox ら と Internet Explorer7 で 
は 、 次 の よう に 設定 を 変更 し ます 。 

e Firefox ら の 場合 
⑯「[ ソ ツー ル (T)] 一 [オプ ショ ン (O)] を 選択 し ます 。 


⑯Firefox ら 
JavaScript の 詳細 訪 定 Ed| 


次 の スク リブ ト を 許可 する : 

















@「 コ ン テ ン ツ 」 の カテ ゴリ の [ 怠 騙 計 ⑦- ] ボタ ン を クリ ッ ク し | 回 ウインド の の 物 動 また は 大 まさ の 変更 ⑩ 
ます ウン ドウ 0 フ * - カ 2. 面 が 曽 か ) を 切り 替え る 
s セテ キス トメ ニュ ー を 無 協 化 ま た は 変更 する (⑪) 
@「[ ス テー タス バー の テキ スト を 変更 する (C)] を DN に し | 口 人 ター の en の (> トウ 0⑪ 


名 ーB2 が パー の テキ スト を 変 奄 す る ⑯) | 


て [し で ボタ ン を クリ ッ ク し ます 。 


e Internet Explorer フ の 場合 





⑯「[ ツ ー ル (O)] 一 [イン ター ネッ ト オ プ ショ 


設定 








ン (0)] を 選択 し ます 。 @ 有 に する Big 
霊 ) アク ティ ブ ストー 
@「 セ キュ リティ 」 タ ブ の 区 LOX557 ズ 6] 07eWS 
ボタ ン を クリ ッ ク し ます 。 包 スプ ト GO ス テー パー 更新 する 


[スク リプ ト で の ステ ー タ スバ ー の 更新 を 
許可 する ] で [有効 に する ] を ODN に し て 
に =9K ボタ ン を クリ ッ ク し ます 。 


@ 無効 に する 
有効 に する 
辻 」 9 リプ ト に よる 胎 り 付け 娘 理 の 許可 
@ タイ アロ グ を 表示 する 








守 ) スウ リフ ト L さ れ た ウィ ンド ウ を 合っ て 情報 の 入力 を 求め る こと を Web サイ ト に 
@ る 





* 
*internet Explorer の 再開 後に 有効 に な り ます 。 
カム 訟 定 の リセ ッ ト 





リセ ッ ト 先 (R: [中高 (大 宮 。 el [JR 




















rrt とい r は ーー デー デー ニー キー ニニ ーー ニー ンー ィ る キュ ーー ニー ニー コ ーー ニャ ーー の ャ ー テ ーーー と ーー テー デー 


! 
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sEcTION | 譜 [し JHArreko4r joss] 
0 計画 像 を 制御 する 方 法 に つい て 















還 還 了 >>) 画像 の 制御 方 法 
JavaScript で は 、 画 像 を 制御 (参照 や 設定 ) す る 方 法 が 複数 あり 、 目 的 に 応じ て 使い 分 け ます 。 





images」 配 列 (連想 配列 ) を 利用 する 方 法 

「images」 配 列 を 利用 する 方 法 は 、 古 い ブ ラウ ザ で も 新しい ブラ ウザ で も 問題 な く 利 用 で きま す 。 「images] 
配列 は 連想 配列 で も ある た め 、 参 照 番号 また は <img> タ グ の 「name]」 属 性 で 画像 を 指定 する こと が で きま す 。 
配列 の 参照 番号 は 、HTML 文 書 内 で <img> タ グ が 出現 し た 順番 に 番号 が 割り 振ら れ ま す 。 


> DOM を 利用 する 方 法 

DOM が 利用 で きる ブラ ウザ で あれ ば 、<img> タ グ に ID 
名 を 指定 し 、「document.getElementByld()」 を 使っ 
て 直接 制御 する こと が で きま す 。 これ は <img> タ グ だ け 
で は な く 他 の 一 般 的 な タグ の アク セス と 同様 で す 。 また 、 
「getElementsByTagName()」 を 使っ て 特定 の 領域 
の <img> タ グ だ け を 抽出 する こと も で きま す 。 他 に 、 ノ ー 
ド に アク セス する こと で 画像 へ の アク セス が 可能 で す 。 





(人 つ ③) | 8 Coavasript-Sampleyoe. 円 uve seardh 
- 守 人 ぷ Java5cnpt Sample | 」 倫 ・ 回 ・ 唱 ・ は ペー ジ @ マ 





如 固 邊 r0 314VHO 


了 y ライ ブラ リ を 利用 する 方 法 

prototype.jS ラ イブ ラリ や jQuery な どの ライ ブラ リ 2 
を 利用 する と 、 ス タイ ル シ ー ト の クラ ス 名 や HTML タ グ | 較 計 し 
の 階層 構造 を 指定 し て 制御 する こと が で きま す 。 
prototype.JS ラ イブ ラリ で は 「$$()」、jQuery で は 「$()」 サン プル で は 、 そ れ ぞ れ 異 な る 方 法 を 使っ て 、 


を 使っ て 、 パ ラメ ー タ に クラ ス 名 / 階 層 構 造 を 指定 し ます 。 同一 の 画像 「images/01.jpg」 を 呼び 出し て 
いる 。 [画像 を 変更 ] ボ タン を クリ ッ ク す る と 
一 斉 に 「images/02.jpg」 に 切り 替わる 








Eee 





gg 当 目 用 用 馬 因 際 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Trans1tiona1 / /EN"> 
<htm1] > 
<head> 

<meta htp-equ1Y= "ConEen ヒ -type" ConEen ヒ =" モ ex モ 上 /htm1: まき 
CharSe ヒ =utF-8"> * 
< 上 1 上 1e>JavaSo エ ip 上 Samp1e< / ヒ 1 上 1e> 
<11ink re]="styleshee" type="tex 上 /css" hreF="main.cCsg" 
media="a11 "> 
< く SC エ 1p 上 tyDpe= "上 ex 上 / ] る aaSC エ 1D 上 " SC= "や OotyDe . ]S "></ SC エ 1p ヒ > 
く 8SCr1p 上 yDe= "上 ex / る aVaSC エ 1D ヒ " 8 エ C= "ma1n . 8 "></ SC エエ 1D キ > 


</head> の 





<body テ > 
avVaSc エ 1p モ 上 に よっ て 指定 し た 画像 に アク セス し 、 ボ タン を クリ ッ ク す る こと で 画像 を 入れ 替え ます 。 
<Form aotion=" ./cheok . cg1" method= "get" name="mainForm"> 
<1npu type= "buton" 1d="seEButEton" val1ue= "画像 を 変更 "> 


</ Form> 

< く d ュ マテ 
<1mg Sro="1mages/01 .]pg" name="photo1 "> ゃ 
images 配 列 で アク セス (参照 番号 を 指定 ) <D ェ > デ ツ 
<1mgd Sro="1mages/01 .Jpg" name="photo2"> こさ 
image8 配 列 で アク セス (name 属 性 を 指定 ) <D ェ > ゃ ご 
<1mg SFo="1mages/01 .Jpg" 1d= "photo"> こい 


document . getE1ementBy エ Td ( ) で アク セス ( 1d 属 性 を 指定 ) <b エ > 
<1mg Sro="1mages/01 .Jpg" cl1ass="HDV"> = 
prototype . js で アク セス (c1asgs 属 性 を 指定 ) <b エ > “ご 

< く /d1 マ > 

<divy 1d="photoA1bum "> 
<1mgd Sro="1mages/01 .]pg"> getE1ementsByTagName ( ) で アク セス <b エ > 
<1mg Sro="1mages/01 .]jpg" class="HDV "> ww 
prototype . js で アク セス (c1ass 属 性 を 指定 ) <br> 』ー 

く /d ュ マッ > 

</body> 


</htm1 > 





ReWXg 宮 Se 選 目 用 目 mainjs 


window.on1oad = Funotion ( ) { 


トー 


document . getE] ementByTd ( " setButton" ) .onc1ick = Funoction( ) { 
Yar 1mgURL = "images/02 .]pg" : 
documen . images [0] .src = imgURL : 一 禄 
documen . images [ "photo2" ] . src = imgURL : 一 許 
document . getE1emenEByTq ( "photo" ) . src = mgURL : 一 諾 
$$(" .HDV" ) . each ( Eunction ( ob] ) { 

ob] . src = "images/02.]jpg": 

まり か 
Yar root = qoocument .getE1ementByTd ( "photoA1bum" ) 
Var chi1qdTmg = root.getEg1ementsByTagName ( "1mg" ) : 
chi1qdTmg [0] .src = imgURL : 


…「images」 配 列 を 利用 し て 最初 の 画像 の URL を 指定 し て いる 

…「images」 配 列 で 画像 の 名 前 を キー に し て 画像 の URL を 指定 し て いる 

…DOM を 使い 、ID 名 が 「photo」 の 画像 の URL を 指定 し て いる 

“prototype.jS ラ イブ ラリ を 使い 、 ス タイ ル シ ー ト の クラ ス 名 が 「HDV」 の 画像 の URL を 指定 し て いる 
DOM を 使い 、ID 名 が 「photoAlbum」 の <div> タ グ 内 に 含ま れる <img> タ グ の 最初 の 画像 の URL を 指定 し て いる 
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@)5Yo 














一 定時 間 ご と に 画像 を 
自動 的 に 切り 替え て 表示 する 
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ここ で は 、 一 定時 間 ご と に 次 々 と 画像 を 入れ 替え る 方 法 に つい て 解説 し ます 。 








(@:③) | cmsvasnpt-sal < | な | x uve seareh 





て 表 う - ーー ag 


次 | @avasopt sampe | 食 ・ 回 ・ 和 ・ | 診 svescrpt sampe 全 ・ 回 ・ 加 ・ 
私 の 好き な 風景 私 の 好き な 風景 
最近 、 振 に 気に入っ て いる 風 果 の 写真 で す 。 最近 、 特に 気に入っ て いる 風 虹 の 写真 で す 。 









































で の 思 | @ Cavasonptsal < | っ | x uve seareh 








(人 の)[③) | Cavascrpt-sa 回 x uive seardh 





SG | JavaScript Sample | | 倉 ・ 氏 ・ 旭 < SW <⑳ | 欠 JavaScrpt Sample | 食 ・ 回 ・ 電 < 
私 の 好き な 風景 私 の 好き な 風景 
最近 、 特に 気に入っ て いる 風 暴 の 写真 で す 。 最近 、 特 に 気に入っ て いる 風景 の 写真 で す 。 






































ら 秒 ご と に 画像 


が 入れ 替わる 


SeWXg@e 可 当 目 用 用 巴 軸 了 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01 TransiEiona1 / /EN "> 


<htm] > 
<head> 


<meta h 上 わ -Gdu1 マ = "ConEen ヒ 上 ype" Conten ヒ = "Ex モ /hEm] : 
Cha エ SeG モ =utF-8"> 

< ヒュ ヒ 1@> 了 aaSC エ ip 上 Samp1e< / 上 も 上 1e> 

<1ink re]="sty1eshee" ype= "texE/css" hrefF="main.CS8" 
media="a11 "> 


く 8C エ 1p 上 上 ype= " 七 @x / aaSC エ 1D ヒ 上 " SC= "ma1n . ]S "></ 8C エ ュ 1 ロキ > 


</head> 


<body テ > 
<h1> 私 の 好き な 風景 </h1> 
最近 、 特 に 気に入っ て いる 風景 の 写真 で す 。 
<diy c]1ass= "photoA1bum "> 

<1mg Sro="1mages/DSC0001 .]pg" 1qd="photo"> 一 馴 

く /d1 マ > 

</body> 

</htm1> 


台 入れ 替え る 画像 に id 属性 で ID 名 を 指定 する 


Xag 事 eg 当 目 用 目 main.jS 


window.on1oad = funotion( ) { 
SeTnterva1 ( "a1bum . swapTmage() ", 2000) : 一 豆 
} 
Var a1Dbum = 【{ 
imageURL,。 : [ 
"1mages/DSC0001 .jpg", 
"images/DSC0042 .]jpg", 
"1mages/DSC0103 . jpg", 
"1images/DSC0154 .]pg", 
"1mages/DSC0280 .]pg" 
] , 
SwapTmaqge : funotion ( ) { 





thi gs . CoOun ヒ ++: 
3fF (his.coun キ >= this .imageURL . 1ength) this.count = 0: 
回 一 document .getE1emenByTd ( "photo" ) . src = his.1mageURL, [上 hi s . Coun] : 
す 。 
count : 0 一 回 


7 


トー 


… タ イマ ー を 使っ て ら 秒 ご と に 画像 を 入れ 替え る 処理 (「album.Swaplmage()」) を 呼び 出す 
… 入 れ 替 える 画像 の URL を 配列 と し て 用 意 す る 

… 画 像 を 表示 する 位置 を 示す カウ ンタ を 増やし 、 配 列 数 を 超え た ら 0 に 戻す 

… カ ウン タ に 対応 し た 画像 を 入れ 替え る 

… カ ウン タ を 初期 化す る (0 に する ) 














回 回 回 回 回 


(@ 損 抽 】 映 租 タイ マー を 使っ て 一 定時 間 ご と に 画像 URL を 入れ 替え る 


一 定時 間 ご と 画像 を 入れ 替え る に は 、「setlnterval」 タ イマ ー を 使っ て 画像 の URL を 指定 し ます 。 入れ 
替え る 画像 の URL は 、 あ ら か じ め 配 列 内 に 指定 し て お きま す 。 この 配列 の 何 番目 の 画像 を 表示 する か を 示 
す カ ウン タ を 用 意 し ます 。 この カウ ンタ を 1 ずつ 増やし て 行く こと で 画像 を 入れ 替え る こと が で きま す 。 カ 


ウン タ が 配列 の 要素 数 を 超え た ら 0 に 戻す こと で 延々 と 繰り 返す こと が で きま す 。 











導 固 邊 0 -3 ヨ 1dVHO 
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マウ スカ ー ソ ル が 車 な っ た ら 


5 ア 厨 像 を 切り 替え る 





肝 団 邊 OldVHO 








ここ で は 、 マ ウス カー ソル が 重なっ た ら 画 像 を 切り 替え る 方 法 に つい て 解説 し ます 。 





づ に 肖 の で uec sonpewo | ヶ |x lewesesra 
W @ |@wsptsemgs | | 合 ・ 回 ・ 提 こ は く ー ジ の < 


マウ スカ ー ソ ル を 重ね る と 








CeR 自 動車 へ よう こそ 





内 





ぺ H 部 コン ピュ ー タ | 保護 モー ド : 無効 。 


we 





タブ の 画像 が 切り 替わる 










ET 


富久 |@mvaseptsampe | | 舎 回 - 趣 ・ に 












CSR 自 動車 へ よう こそ 
oo: Peace ] 議 琶 計 





章 コン ピュ ー タ | 保護 モー ド : 無効 





SeWmse 当 目 用 用 駒 際 index.htm 


<!DOCTYPE htm1] PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 


<htm1] > 
<head> 


<me ヒ ta h ヒ p-@Gqu1= "ConEen ヒ 上 ype" ConEen ヒ = "上 ex 上 /htm] : 


CharSe キ =uF-8"> 


< モ ュ 1 上 1e>JaVaSC エ 1p 七 Samp1e</ 上 1 上 1e> 
<1ink re1="sty1esheet" ype= "tex 上 /css" hreF="main.CSS" 


media="a11 "> 


< く 8SC エ 1p 上 上 ype= "上 ex / aa8C と て 1D 七 " SC= "ma1n . 8S "></ SC て 1p ヒ > 


</head> 
<Dbody> 


<h1>Cgamp : R 自 動車 へ よう こそ ! </h1> 


<d1iy 1d="mainMenu"> 一 視 
<1mg Sro="1mage8/menu1 


-9g1F" width="84" height="24"> 


<1mg sro="1mages/menu2 .g1F" width="84" heigh キ ="24"> の 


の 


<1mg Sro="1mages/menu3 .g1F" width="84" heigh="24"> 
</d1 マ > 
く 1mg Sro="1mages/pic001 .]pg" width="250" height="150"> 
</bod マ > 
</htm1> 





頭 入れ 替え る 画像 を 囲む 領域 を <div> タ グ で 設定 する 


SeWXemee 当 目 用 用 本 RS 表 交 参 main.js 


window.on1oad = Funotion( ) { 
var rootNode = qdocument .getE1ementByTdq ( "mainMenu" ) : 
Yar 1mgTag = rootNode .getE1ementsByTagName ( "1mg" ) : 
For (Var 1=0: 1<imgTag.1ength: ュ ++) { 
imgTag [1] .onmouseover = fFunotion( ) { 
て this . src = his.sro.Sp1i 上 (".giEF") [0]+"_over.g1F": 一 放 
} 
mgTag [1] .onmouseou = funotion( ) { 
this.sro = this .src . Sp11t("_over .g1fF") [0]+".giF" : 一 回 
} 














トー 


…D 名 が 「mainMenul」 の <div> タ グ を 基準 と し て <img> タ グ を 抽出 する 
…<img> タ グ の 数 だ け 繰り 返し 、 マ ウス オー バー 時 、 マ ウス アウ ト 時 の 処理 を 追加 する 
… マ ウス が 重なっ た ら 画 像 名 に 「_over.gif」 を 追加 し た ファ イル 名 に 入れ 替え る 

… マ ウス が 離れ た ら 「_over.gif」 を 削除 し た ファ イル 名 に 入れ 替え る 


(@7 損 6】 映 秀 onmouseover」 と 「onmouseout」 に 画像 を 入れ 替え る 処理 を 設定 する 


マウ ス が 画像 の 上 に 重なっ た ら 画 像 を 入れ 替え る 、 離 れ た ら 元 の 画像 に 戻す と いっ た ロー ルオ ー バ ー の 
処理 は 、「onmouseover」 イ ベン ト と 「omouseout」 イ ベン ト を 利用 し ます 。 従来 は HTML タ グ の <a> ま た 
は <img> タ グ 内 に イベ ント を 記述 し て いま す が 、DOM が 利用 で きる ブラ ウザ で は サン プル の よう に 特定 の 
領域 に 限定 し て 画像 の ロー ルオ ー バ ー を 行う こと が で きま す 。 画像 の ロー ルオ ー バ ー は <img> タ グ 自 身 
の 「src]」 プ ロ パ ティ を 入れ 替え る た め 、[「this.Src] と し て 指定 し 表示 する 画像 URL を 指定 し ます 。 

サン プル で は 元 の 画像 ファ イル 名 に 「_over」 を 追加 し た 画像 を ロー ルオ ー バ ー 画 像 と し て 設定 し て いる 
た め 、 次 の よう に 画像 ファ イル 名 が 設定 され て いな いと 動作 し ませ ん 。 








ファ イル 名 内 容 
menu1.gif タブ 項目 1 の 標準 画像 
menu1_over.gif タブ 項目 1 の ロー ルオ ー バ ー 画 像 
menu2.gif タブ 項目 2 の 標準 画像 
menu2_over.gif タブ 項目 2 の ロー ルオ ー バ ー 画 像 
menu3.gif タブ 項目 3 の 標準 画像 
menu3_over.gif タブ 項目 3 の ロー ルオ ー バ ー 画 像 
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058 マウ スカ ー ソ ル が 重なっ た ら 
複数 の 画像 を 切り 替え る 





































ここ で は 、 マ ウス カー ソル が 重なっ た と き に 複数 の 画像 を まとめ て 切り 替え る 方 法 に つい て 解説 し ます 。 
3 、 
(の 」③) 還 |@ cmmwesprsa <| ヶ | x uive searh ②③) す | | cavscrpt-s <| | x uve seara 
ye ameewerw SB-e EE 
我が家 の 愛犬 ギャ ラリ 。 
0) 
=E 
ア 
で つ 
本 
ze 
つ 
ik 
量 
画 
像 



































リン ク 文 字 に マウ スカ ー ソ ル 3 枚 の 画像 が 切り 替わる 
を 重ね る と … 


RelWemee 当 目 用 用 馬 I 誠 際 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 
<meta h 上 D-equ1 マ = "Con 革 en ヒ -- 上 ype " Conten ヒ =" モ ex 上 /hEtm] : 
CharSe ヒ =u 上 F-8"> 
< モ ュ 上 1e>JavaSo エ ip 上 Samp1e</ ヒ 1 上 1]e> 
<1ink re]="sty1eshee 上 " type="Eext/ocss" hrefF="main.Cs8" 
med1ia="a11 "> 
く 8C エ 1p 上 上 ype= "上 @x 七 / る VaSC エ 1D ヒ "SC= "ma1m . 8 "></ SC エ 1D ヒ > 
</head> 
<body> 
<h1> 我 が 家 の 愛 犬 ギ ヤラ リー</h1> 
<diy 1qd="photoA1bum" > 一 視 
<a href="#" 1d="ohangeBut て on1 "> ギャ ラリ ー (1 ) </a> | 
<a hrefF=" 失 " SE に sb 
<1mg Sro="1mages/DSC0001 .]pg" width="240" height="135"> の 








) 


<1mg Sro="1mages/DSC0042 .]pg" wiqdth="240" height="135"> 
<1mg Src="1mages/DSC0103 . pg" width="240" heigh モ ="135"> 
く /d ュ マ > 
< く /body> 
</htm1 ユ > 


豆 入れ 替え る 画像 を 示す 領域 を 設定 する 
放 イベ ント を 設定 する <a> タ グ に ID 名 を 指定 する 


SelWNeeej り 当 目 有用 本 本 本 前 湖 main.js 


window.on1oad = fFunotion ( ) { 
document . getE1ementByTdq ( "changeBu 上 Eon1 " ) .onmouSeove エ = = 





Funotion() { で ン 
a1bum3 .change ( [ "images/DSC0001 .pg", "images/DSC0042.Jpg", き 。 
"1mages/DSC0103 .]pg"] ) : + ご 


} 
document . getE1ementByTdq ( "changeButon2" ) .onmouSeove エ = き 。 
Funotion() { 《 
a1jbum3 .change ( [ "1mages/DSC0154 .]pg" , "1mages/DSC0280.jpg", “。 
"1mages/DSC1005.]pg"] ) : 和む 
} 
} 
Var a1Dbum3 = { 
change : funotion (1mageArray ) { 
Yar imgTag = document .getE1ementByTd ( "photoA1bum") . g 
getE1ementsByTagName ("1mg" ) : 
For (Var =0: 1<imgTag.1ength: ュ ++) 【{ 
imgTag [1] .sro = imageArray [1] : 
} 


} 


台 リン ク 文 字 に マウ ス が 重なっ た 時 に 入れ 替え る 画像 URL を 処理 する メソ ッ ド に 渡す 
話 |D 名 が 「photoAlbum」 内 に ある <img> タ グ を 抽出 する 
医 <img> タ グ の 数 だ け 繰 り 返 し 画像 URL を 設定 する 


(@jj】 遇 血 入れ 替え る 画像 URL は 配列 で 渡す 
マウ ス オ ー バ ー で 複数 の 画像 を 入れ 替え る に は 、 入 れ 替 える 画像 の URL を 配列 と し て 用 意 す る か 、 そ の 
まま 入れ 替え を 行う 関数 や メソ ッ ド に 渡し ます 。 サン プル で は 、「album3.change()」 に 配列 と し て 渡し て 
いま す 。 実際 に 画像 を 入れ 替え る 処理 を 行う [album3.change()」 で は 渡さ れ た 配列 を 参照 し 、 画 像 
URL と し て 設定 する だ け な の で 短い コー ド で 済み ます 。 





サン プル の よう に 入れ 替え る 画像 が 特定 の 領域 に 含ま れる か 連続 し て いる 場合 は 簡単 で す が 、 そ う で な 
い 場 合 に は ID 名 また は スタ イル シー ト の クラ ス 名 を 参照 し て 画像 を 入れ 替え る 方 法 を 使い ます 。 
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eke 咽 用 | |]cHAprERo4y| lose 
059 画像 を クリ ッ ク す る た びに 次 々 と 
画像 を 切り 替え て 表示 する 





ここ で は 、 ク リッ ク 操 作 で 次 々 と 画像 を 切り 替え て 表示 する 方 法 に つい て 解説 し ます 。 









OK | 多 comesrprse < 四 門 Iteso 


w 人 | の mesomsme | 名 ・R・v 













ネコ の 写真 館 
近所 の ネコ を 撮っ て み ま し た 。 
※ 写真 を ウリ ッ ク す る と 、 次 の 写真 が 表示 され ます 















|@ て C:\JavaScript- 


se -| ら | x lee 


トート =-R ュ ーー 


(で で 


に 1 容 | @Javasnpt sample 










ネコ の 写真 館 
近所 の ネコ を 撮っ て み ま し た 。 
※ 写真 を フリ ッ ク す る と 、 次 の 写真 が 表示 され ます 。ーー 





















間 雪 区 口 " 文 
広 王 当 | 呈 | 










曽 コン ビュー タ | 保護 モー ド : 無効 








[comesowr sm | x | uive search 


トー トド ccShce ニ ーー 


- 守  | @Jmasomptsampe 





ネコ の 写真 館 
近所 の ネコ を 撮っ て み ま し た 。 
※ 写真 を フリ ッ ク す る と 、 次 の 写真 が 表示 され ます 。 

























、 曽 コン ピュ ー タ | 名 護 モー ド : 無効 








画像 を クリ ッ ク す る と 次 の 
画像 が 表示 され る 














二 コン ピュ ー タ | 保護 モー ド : 無効 








Seaee 可 当 目 用 用 上 馬 央 了 index.htm 


<!DOCTYPE htm] PUBLTC "-//W3C//DTD HTMT, 4.01 Transiiona1 / /EN "> 
<htm] > 
<head> 
<me ヒ a h ヒ tp-eGqu1 マ = "Conen ヒ -t 上 ype" ConEen ヒ = " ヒ exE /hEm] : 
CharSe ヒ =utF-8"> 1 
< ヒュ 上 1e>JavaSoript Samp1e</ ヒ ュ 1 上 1e> 
<1ink re1="styleshee" type= "tex モ /css" hrefF="main.CsSs" 
media="a11 "> 《 
< く 8C エ 1Dp 上 上 yDe= "ex / ] る さび aSC エ 1D 上 "8S エ C= "ma1m . 8 "></ SC エ 1D ヒ > 


</head> の 


< くわ ody テ > 
<h1> ネ コ の 写真 館 </h1> 
近所 の ネコ を 撮っ て み ま し た 。 <b エ > 
※ 写 真 を クリ ッ ク す る と 、 次 の 写真 が 表示 され ます 。 
<diy c1ass="photoA1bum" > 

<1mg Sro="1mages/DSC0001 .]pg" 1qd="photo"> 一 馴 

< く /d1 ざ > 

</body> 

</htm1> 


豆 クリ ッ ク で 入れ 替え る 画像 に ID 名 を 指定 する 


還 旧 上 用 ER 商 交 mainjs 


w1ndow.on1oad = Funotion( ) { 

document . getE1ementByTd ( "photo" ) .onc1iock = a1bum5 .nexTmage: 一 捉 
} 
Va a1bum5 = { 

imageURL, : [ 


の 放 8@) り / 





"1mages/DSC0001 .jpg" , 
"images/DSC0042 .jpg", 
"images/DSC0103 . jpg", 
"images/DSC0154 . jpg", 
"1mages/DSC0280 . jpg" 
] , 

nex モ Tmage : function ( ) { 


a1Dbum5 . Coun 二 : 司 
ifF (a1bum5 .count >= a1bum5 . imageURL . 1ength) a1bum5.count = 0: 
document .getE1ementByTd ( "photo" ) .SrC = 

a1bum5 . imageURL [a1Dbum5 . Coun 七 ] : ma 


}/ 
count : 0 一 回 
} 


豆 画像 に クリ ッ ク イ ベン ト 発 生 時 の 処理 を 設定 する 

話 表示 する 画像 を 示す カウ ンタ を 増やし 、 枚 数 以上 に な っ た ら 0 に 戻す 
話 | あら か じ め 定 義 し て ある 配列 か ら 画像 URL を 読み 出し 設定 する 

話 カウ ンタ を 初期 化す る 


(@jjf 抽 9】 映 箇 カウ ンタ を 用 意 し て 画像 UHL を 設定 する 
クリ ッ ク で 画像 を 次 々 と 表示 し て いく に は 、 あ ら か じ め 配 列 に 画像 URL を 定義 し て お きま す 。 何 番目 の 画 
像 を 表示 する か を 示す カウ ンタ を 用 意 し 、 ク リッ ク さ れ た ら 1 ずつ 増やし て いき ます 。 カウ ンタ が 配列 の 要 
素数 を 超え た ら 0 に 戻し ます 。 これ に より クリ ッ ク し 続け た 場合 、 最 初 の 画像 に も どっ て 延々 と 表示 され る 

















よう に な り ま す 。 
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SE の OMIN | 還 CHAPTER-04 と 060 


ン リ ッ ク し 記 と き に 
060 画像 の サイ ズ を 変更 する 








ここ で は 、 ク リッ ク す る た びに 画像 の サイ ズ を 大 きく し た り 、 小 べく し た り と 、 交 互 に 変更 する 方 法 に つい て 解 
説 し ます 。 













- | @ NESCOPES5nmeO 人 35 -|5|xl thee search 


| | 合 ・ 名 ・ 提 ・ 還 ペー ジ の て 





守 補 | wascmptsample 
















(の: す ) - |g で:WOwveSo1A-SamiteWO4.hmm 了 | る | 53 ] Le search 














ペー ジ ガ 天 コン ビュー タ | 名 護 モー ド : 無効 | 人 人 @JavaSoipt Sample | 人 本 サベージ (の て 
レーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ゴ 





画像 を クリ ッ ク す る た びに 
画像 の サイ ズ が 切り 替わる | に =] | 如 コ ンピュータ | 人 了 モ ー ド : 押 - 








elWXg 事 eg 当 目 用 | index.htm 


<!DOCTYPBE htm1 PUBLTC "-//W3C//DTD HTMTL, 4 .01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta h 上 上 D-eGqu1Y= "ConEen ヒ -type" ConEen ヒ = "Eex 上 /htm] : 
CharSeG ヒ =uF-8"> 
< ヒュ 1 上 1e>J げ ayaSoc エ ip Samp1e</ ヒ ュ E]e> 
<1ink re]="sty1eshee 上 " ype="Eex 七 /css" hreF="main.Css" 
media="a11 "> の 


テ < ご C エ 1p ヒ 上 上 yDe= "ヒヒ / る Va8C エ 1D ヒ "SC= "ma1n .]S "> く / SC エ ュ 1D ヒ > 
</heaqd> 
<body> 
<h1 > 桜 写真 集 </h1> 
<d1iV 1d="photoA1bum"> 
<img sro="1mages/DSC0001 .]pg" c1ass="photoSma11 Frame"> 
<1mdg Sc="1mages/DSC0103 . pg" cl1ass= "photoLarge Frame"> 
<1mg Sro="1images/DSC0280 .]pg" cl1ass= "photoSma11 Frame"> 
</d1 マ > 
</body> 
</htm1> 


環 クリ ッ ク で サイ ズ を 切り 替え る 画像 に スタ イル シー トク ラス を 指定 する 


生前 main.js 


window.on1oad = fFunction( ) { 
var root = qoocument .getE1ementByTd ( "photoA1bum" ) : 
var 1mgTag = root.getE1ementsByTagName ( "1mg" ) : 
For (Var 1=0: 1<imgTag.1ength: 1++) {一 名 
imgTag [1] .onc1ick = Funoction( ) { 一 上 
Ya cName = his.c1assName : 一 略 


| (cName .matoh ( /photoSma11 / ) ) { 
this.c1assName = cName .rep1ace ( /photoSma11/ , "photoLarge" ) : 





GEU エ T 


} 
本 | (cName .match ( /photoLarge/ ) ) 【 
this.c1assName = cName .rep1ace ( /photoLarge/ , "photoSma11" ) : 


GEurn 


ょ ンー 


・ 画 像 の 数 だ け 繰り 返す 

… 画 像 が クリ ッ ク さ れ た と き の イ ベン ト を 設定 する 

… 現 在 の スタ イル シー ト の クラ ス 名 を 読み 出す 

… ス タイ ル シ ー ト の クラ ス 名 に 「photoSmall」 が 含ま れ て いる 場合 は 正規 表現 を 使っ て 「photoLarge」 に 置換 する 
… ス タイ ル シ ー ト の クラ ス 名 に 「photoLarge」 が 含ま れ て いる 場合 は 正規 表現 を 使っ て 「photoSmall」 に 置換 する 














回 回 回 回 回 


納 団 邊 0-3 ヨ IdYHO 





納 固 自 0O-3 コ IdVHO 











SeiWXem@@ 当 目 上 用 WSE 移 main.css 


body 【 
background-Co1 or : #FFFf : 
Co1or : 提 333: 
Fon-size : 80 も も : 
1ine-height:1.8: 

} 

da ボ 
Fon-81z@ : 14p 七 : 
CGIHony 非 777: 
padding : 0: 
margin:0: 

} 

.photoLarge { 
w1qth : 240px: 
height : 135px: 

} 

-photo8ma11 { 
w1dqth : 48px: 
height : 27px: 

} 

.Frame 
border : 1Dx #338 so11d: 

} 


副 写真 を た 大 きく し た と き の ピ クセ ル 数 を 指定 する 
話 写真 を 小さ くし た と き の ピ クセ ル 数 を 指定 する 


@7j】 映 上 あら か じ め サ イズ を 示す スタ イル シー トク ラス を 用 意 し 入れ 替え る 
クリ ッ ク で 画像 の サイ ズ を 変更 する に は 、 あ ら か じ め ス タイ ル シ ー ト で 小さ い サ イズ の クラ ス と 大 きい サ 
イズ の クラ ス を 定義 し て お きま す 。 現在 適用 され て いる スタ イル シー ト の クラ ス を 「className」 プ ロ パ 


ティ か ら 読 み 出し 正規 表現 を 使っ て 置換 し ます 。 
直接 スク リプ ト で 画像 の サイ ズ を 示す スタ イル シー ト の 「width] プ ロ パ ティ 、「height」 プ ロ パ ティ を 操作 





する こと も で きま す 。 た だ し 、 文 書 構造 と 装飾 、 動 作 を 分 離す る 方 が 好ま し いた め 、 サ ンプ ル の よう に スタ 
イル シー ト の クラ ス を 定義 し て 切り 替え る 方 が ベス ト で す 。 この 方 法 で あれ ば サイ ズ を 変更 する 場合 も ス 
クリ プ ト を 変更 する 必要 が あり ませ ん 。 











SECTIoN 旧 計 [し 」CHAPrEeoo4 pl joa | 
ブラ ウザ 上 の 画像 を 
上 自在 に ドラ ッ グ する 








ここ で は 、Yahoo! が 提供 し て いる Yahoo UI ライ ブラ リ を 利用 し て 、 画 像 を ドラ ッ グ する 方 法 に つい て 解説 し 








r0-d ヨ ldVHO 


竣 固 








庫 コン ピュ ー タ | 保護 











index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transiiona1 / /EN"> 
<htm] > 
<head> 
<me ヒ a hh 上 上 D-Gqdu1= "ConEen ヒ -t 上 ype" ConEen ヒ =" モ ex 上 /htm1 : 
CharSe ヒ =u エ F-8"> 





庄 較 人 0-3 ヨ 1dVHO 





< モ ュ 上 1e>JavyaSc エ ip Samp1e</ 上 ヒュ 上 1e> 
<1ink re1="styleshee" type="Eex 七 /css" hreF="main.cCsS" 
media="a11 "> 
<8C エ 1p ヒ 上 tyDpe="EexE / aVaSC エ 1D 上 " So= "Yahoo . ]S "></ SC エ 1p セ > 
< ご エ 1p ヒ 上 上 yDe=" ヒ @x 七 / る VaSC エ 1D 上 " SC= "dom .S "></ SC エ 1p ヒ > 
<SC エ 1p ヒ 上 tyDpe= "ex /AVaSC エ 1D 上 " 5S エ o= "even .S "></ SC エ 1p セ > 
<8C エ 1p 上 tyDpe= "上 ex 七 / AaVaSC エ 1p" 5 エ o= "dragdroDp . 8 "></ SC エ 1p ヒ > 
< く 8C エ 1p 上 上 ype= "上 @Gx 七 / る VaSC エ 1D 上 " S エ C="ma1nm .S "></ SC エ ュ 1p ヒ > 
</head> 
< くわ ody> 
<h1> ピ ン ナ ッ プ </h1> 
※ 画 像 を ドラ ッ グ し て 好き な と ころ に 配置 し こく だ さい 。 
<diY 1d= "photoA1Dbum "> 
<1mqg sro="images/DSC0001 .Jpg" 1d= "photo1 "> 
<1mg Sro="images/DSC0103 .jpg" ier・ohoroa ト 回 
<1mg sro="images/DSC0280 .]Jpg" 1q= "photo3 "> 
< く /d1 マ > 
</body> 
</htm1> 


加 ライ ブラ リ に 必要 な ファ イル を 読み 込ま せる 
放 ドラ ッ グ す る 画像 を 用 意 する (この と き に 必ず ID 名 を 指定 する ) 


Weej 当 目 用 用 本 RS 敵 遂 main.js 


window.on1oad = function( ) { 
Yar roo = document .getE1ementByTq ( "photoA1bum" ) : 
var 1mgTag = root.getE1ementsByTagName ( "img" ) 
For (var i=0: 1<imgTag.1ength: ++) {一 名 
new YAHOO . uti1 .DD (imgTag [1] .1d) : 一峰 
} 





台 ドラ ッ グ 対象 に する 画像 の 数 だ け ド ラッ グ で きる よう に 繰り 返す 
許 「YAHOO.util DD()」 の パラ メー タ に ドラ ッ グ 対象 に する 画像 の ID を 渡す 


(@ 損 】 租 ドラ ッ グ 処理 は 画像 に |D 名 を 指定 し て 「YAHOO.util.DD()」 を 使っ て 設定 する 

Yahoo UI ライ ブラ リ を 利用 する と 手軽 に ドラ ッ グ 処理 を 行う こと が で きま す 。 ド ラッ グ 対 象 と な る 画像 
や エレ メン ト に は 必ず ID 名 を 指定 し て お きま す 。 この ID 名 を 「YAHOO_.utilIDD() 」 の パラ メー タ に 設定 
る こと で ドラ ッ グ する こと が 可能 に な り ま す 。 































SE で TRG NN | | 賠 [| 」CHAPrER04 r| loe2 






マウ スカ ー ソ ル が 重なっ た ら 
画像 が 浮 ぎ 出る よう に する 


@7o ア 








ここ で は 、Script.aculo.us ラ イブ ラリ を 利用 し て 、 半 透明 の 画像 の 上 に マウ スカ ー ソ ル を 重ね た と きだ け 、 


画像 の 色 が 鮮明 に な る よう に 表示 する 方 法 に つい て 解説 し ます 。 





@ JavaScript Sample - Windows Intermet Explorer |- 居 禄 
[人 | 給 C:*JavaScript-Sai > | サ | XX | | Live Search 





SY < 巡 | 秦 JavaScript Sample 倫 ・ 回 ・ 加 ・ 















人 の) | 引 C:JavaScript-Sal | サ |X 上 uive search 


sY SW | 給 JavaScript Sample 信 ・ 還 ・ 届 ・ 


剖 コン ピュータ | 保護 モー ド : 無効 











マウ スカ ー ソ ル を 乗せ る と 
画像 の 不透明 度 が 変化 し 鮮 
明 に な り 、 マ ウス カー ソル 
を 離す と や や 透明 に な る 商 コン ピュ ユー タ | 保護 モー ド : 無効 旬 10096 < 








eXe 事 9 りり 選 目 用 遇 誠 珍 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML. 4.01 Transitiona1 / / EN"> 
<htm]> 
<head> 

<me ヒ ta h ヒ 上 わ -@Gqdu1 マ = "で Conten モ -t 上 ype" ConEen ヒ =" tex /htm] : 
CharSeG ヒ =ufF-8『"> 
< 上 ュ 1 上 1e>JavaSc エ ip Samp1e</ ヒ ュ 上 1e> 
<11ink re]="sty1lesheet" type="text/css" hreF="main.cCss" 
med1ia="a11 "> 
く 8C エ 1p 上 yDe="exE /aVaSC エ 1D ヒ "8S エ o= "DooyDe . 8 "></ SC エ 1D ヒ > 
く 8SC エ 1p 七 上 yDe= "ヒモ / aaSC エ 1p 七 " | 回 
SC= " SC エ 1paou1] ous . 8 "></ SC エ 1p セ > の 


容 JavaScript Sample - Windows Internet Explorer 上 屋 放 
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肝 団 邊 0-3 コ ldYHO 








<8C エ ip 上 ype= "ヒヒ / JaVaS ご C エ 1 " 5S エ o= "ma1m . 8S "></ SC エ 1 わ ヒ > 
</head> 
< くわ Dody テ > 
<h1> ミ ニニ 美術 館 </h1> 
<d1i 1d= "や 1CGa11e ェ y" テ > 
<1mg Sro="1mages/pic01 . pg "> 
<1m Sro="1mageSs/p1c02 . pd "> 
<1mg Sro="1mage8/p1c03 . pg9 "> 
</d1 マ > 
</body> 
</htm1> 


副 script.aculo.us を 利用 する に は prototype.js ラ イブ ラリ が 必要 な の で 両方 と も 読み 込ま せ て お く 


ReiWNe ヨ mee 当 目 用 本 RS 靖 main.js 


window.on1oad = Funotion( ) { 

ar roo = qdocument .qetElementBy エ Td ( "picGa11ery" ) : 

Yar 1mgTag = roo.getE1ementsByTagName ("1md" ) : 

For (Var 1=0: 1<imgTag.1ength: ュ ++)【{ 
imgTag [1] .onmouseover = Funotion(){ 一 視 

話 一 new Effect .Opacity(this, { from:0.5, to:1.0, duration:0.5 })): 
} 
imgTag [1] .onmouseou = Funotion ( ) { 一 回 

話 一 new EFfect .Opacity(Ethis, { from:1.0, to:0.5, quration:0.5 }): 
} 


トー 


… マ ウス が 画像 に 重なっ た 時 の 処理 を 設定 する 
…「Effect.OpacityO」 で 変化 する 不透明 度 の 値 と 時 間 ( 秒 ) を 設定 する 
… マ ウス が 画像 か ら 離 れ た 時 の 処理 を 設定 する 
…「Effect.Opacity(O」 で 変化 する 不透明 度 の 値 と 時 間 ( 秒 ) を 設定 する 


@ji 誠 9】 映 秀 Effect.Opacity()」 で 不透明 度 の 変化 を 設定 する 


SCript.aculO0.us ラ イブ ラリ を 利用 する と 、 手 軽 に 不透明 度 の 処理 を 行う こと が で きま す 。 script. 
aculo.us8 ラ イブ ラリ は prototype.jS ラ イブ ラリ が 必要 な の で 、 最 初 に prototype.5}! ラ イブ ラリ を 読み 込ま 
せま す 。 マウ スカ ー ソ ル が 重なっ た と き に は 「onmouseover」 イ ベン ト が 発生 する の で 、 発 生 時 の 処理 を 
指定 し て お きま す 。 

不透明 度 を 変化 させ る に は 、「Effect.Opacity(」 を 使い ます 。 最初 の パラ メー タ に は 不透明 度 を 変化 














させ る オブ ジェ クト また は ID 名 を 指定 し ます 。 サン プル で は [this」 を 指定 し て いま す が 、 こ れ は 画像 自身 を 
示す こと に な り ま す 。 「Effect.Opacity()」 の 2 番目 の オプ ショ ン で は 、 開 始 不透明 度 と 終了 不透明 度 、 そ 
し て 変化 する 時 間 を 秒 数 で 指定 し ます 。 





















Seke が 上 有 | [ICHApreko4r| oss 
スラ イド の よう に 
06J3 画 父 を 表示 する 












ここ で は 、Lightbox ラ イブ ラリ を 利用 し て 、 ク リッ ク し た 画像 が あたかも スラ イド の よう に 表示 する 方 法 に つ 
いて 解説 し ます 。 








Oo 


次 w | 総 vesoptsampe | | 人馬 ・ 還 ・ 外 < 村 ペ ー ジ ⑤ て 












給 C:*JavaScript-Sample\04_imz ・| ち | X Live Search 





春の チュ ー リ ッ プ 展 


Ear 
| トラ イア ン フ 系 』 





画像 を クリ ッ ク す る と … 








fle:/// 剖 コン ビュー タ | 保護 モー ド : 無効 1009%6 < 






















ヶ | xye seare 





(の マ 内 C:\JavaScript-Sample\04_imz > 
| 倫 -< ・ 二 人 は ペー ジマ 






S 守 <W | 紀 〕avaScript Sample 








画像 が 画面 上 に 表示 され 、 
周り は 半 透 明 グ レー に な る 























凌 団 0-4314VHO 





14Z 





如 固 邊 0-4 ヨ IdVHO 
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elWXge り 7 当 目 朋 目 index.htm 


<!DOCTYPE htm] PUBLTC "-//W3C//DTD HTML 4.01 Transiiona1 / /EN"> 
<htm1] > 
<head> 

<meta http-equ1i マ = "Conten ヒ -t 上 ype" ConEen ヒ ="EexE/hEm1: 
Cha エ SeG ヒ =u 上 F-8"> の 
< モ ュ 上 1e>JavaScripE Samp1e</ 上 1 ユ 上 1@> 
<1ink re1="sty1eshee" type="Eex 上 /css" hreF="main.CSS" 寺 a 
media="a11"> 4 ご 
<1ink re1="sty1esheet" type= "ex 上 /ocss" @v 


hrefF="11iqhtbox .CsS" med1ia="a11 "> + ご 
<8Cr1ip type=" ヒ ex /aVaSC エ 1D ヒ "8S エ C= "pootype .]S "> く / SC エ 1D セ > 
<8C エ 1p 上 上 yDe= "ex 七 / JaVaSC エ 1p ヒ " らい 


SoC= "Scriptaou1]ous .S?1oad=eFFeos "></ SCr1p セ > 
<SC エ 1pt tyDpe=" 上 ex /aVvaSC エ 1p 上 " Sro="11ghDox . 8 "></ SC エ 1p ヒ > 
</head> 
<bod ツ > 
<h1> 春 の チュ ー リ ッ プ 展 </h1> 
<a hrefF="photo/01 . jpg" re1="1ightbox [a1bum] " 上 it1e=" 一 重 咲 き "> 
<1mg src="Ehumb/01 . Jp9 "> 
</a> 
<a hreF="photo/02 .jpg" re1="1ightbox [a1bum] " 上 1E1e= "トラ イア ン フ 系 "> 
<img sro="Ehumb/02 .]Jpg"> 
く /a> 
<a hrefF="photo/03 . pg" re1="11ighEtbox [a1bum] " 上 1t 上 1e= "ダー ウィ ン リ "> 
<1mg Sro=" て humb/03 . Jp9 "> 
< く /a> 
</ body> 
</htm1 > 


頭 Lightbox が 使用 する スタ イル シー ト フ ァイル (lightbox.css) を 読み 込む 
ightbox は prototype.jS、SCript.aculo.us に 依存 する の で 読み 込ま せる 
医 Lightbox を 適用 する 部 分 に は 「rel」 属 性 で 「lightbox」 を 指定 する 





@7i 抽 回 劇 ightbox で スラ イド 表示 させ る に は 「rel」 属 性 に 「lightbox」 を 指定 する 


Lightbox を 利用 する に は prototype.jS ラ イブ ラリ と script.aculo.us ラ イブ ラリ が 必要 で す 。 
lightbox.js を 読み 込ま せる 前 に 、 こ の ら つ を 順番 に 読み 込ま せ て お きま す 。 LightDox で スラ イド 表示 させ 
た い 画 像 を <a> タ グ で 囲み 、「rel 属 性 を 指定 し ます 。 「re に "lightbox"」 と し た 場合 は 単独 で の 表示 に な り 、 
「re="lightbox [グル ー プ 名 ] "] の よう に グル ー プ 名 を 指定 し た 場合 は 、 一 連 の グル ー プ と し て 表示 され ま 
す 。 また 、 画 像 の キャ プシ ョ ン を 表示 する に は <a> タ グ の 「title」 属 性 に 設定 し ます 。 

Lightbox は HTML 文 書 内 に 記述 され て いる <a> タ グ の 「rel」 属 性 を 読み 取っ て 自動 的 に 設定 する た め 、 
JavScript プ ログ ラム を 記述 する 必要 は あり ませ ん 。 


































ekeN 咽 有 有 


む な ム ネー ルル な クリッ ク し た と ば 





064 画像 を 拡大 し て 表示 する 








ここ で は 、Highslide ラ イブ ラリ を 利用 し て 、 ク リッ ク し た と き に サム ネー ル 画 像 が 拡大 表示 され る よう に す 
る 方 法 に つい て 解説 し ます 。 

















w | 人 の masorptsame 必 | 合 ・ 





の の : 「@c NOaVESGTipK: mp ime > | ヶ X 昨 Hive 3 - 





回 ・ 旬 ・ は ペー ジ の ・ を 








MY Car Callery 


二 





サム ネー ル 画 像 を 
クリ ッ ク す る と … 


画像 が 拡大 
表示 され る 


























司 





富 人 信人 @mvesptsampe hp - に ss 較 ・ 貴 ・ yt りこ 


(の. 今 証 @c wavaScrpt-Sam Sampieo ime > PP X uive search 





Miy Car CallerY 





拡大 し た 画像 は ドラ ッ グ し て 
移動 さ で せる こと も で きる 











商 コン ピュ ー タ | 保護 モー ド : 無効 











強固 邊 rO-3 ヨ IdYHO 


導 圏 委 0-3 ヨ 14VHO 








Reemwe7 当 目 上 用 相 語 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Trans1iona1 / /EN"> 
<htm] > 
<head> 
<meta h ヒ 上 p-equ1 マ = "ConEen ヒ 上 ype" Conten ヒ ="Eex 上 /htm1: 
Cha エ SG ヒ =u 上 F-8"> ( 
< モ 上 ュ E1e>JavaScrip 上 Samp1e</ ヒ 1 上 1e> 
<1ink re1="styleshee" type="t 上 ex モ 上 /css" hrefF="main.CS8" * 
med1ia="a11"> + ご 
<8C エ ip 上 tyDpe="Eex 上 /aVaSC エ 1pt" sro="highs11qde . 8 "></ SCr1p> 一 視 
< く 8C エ 1 上 上 ype= "上 xx 上 / る VaSC エ 1D 上 " SC= "ma1n . 8 "></ SC エ ュ 1p ヒ > 
</head> 
<Dbod ア > 
<h1>My Car Ga11e ェ y</h1> 
<d1iV 1d="phoEoA1bum "> 
<d1iV 1d="highs11de-Conta1ner"></d ュ 1 マッ > 一 臣 
<a hrefF="photo/01 . pg" 1d="thumb1" c]1ass="highs11qde"> 一 話 
<1mg Sc="Ehumb/01 . Jp9 "></a> 
<diy c1ass="highs11de-capion" で 
フロ ント 
< く /d1 マ > 
<a hrefF="photo/02 .]pg" 1d="thumb2" c1ass="highs11qde"> 
< く 1mg Sro=" て humb/ 02 . pg "></a> 
<diyV cl1ass="highs11ide-caption" 1d="oCaption-For-humb2 "> 
サイ ド 
</d1 マ > 
<a hrefF="photo/03 . Jpg" 1d="thumb3" cl1ass="highs11de"> 
<1mgd Sro="Ehumb/ 03 . pg "></a> 
<diV c1ass="highs11de-cap1on" 1d= "Caption-Fo エ -Ehumb3 "> 
スズ デア シグ 
く /d1 マ > 
く /d1 マ > 
</body> 
</htm1> 


頭 Highslide ラ イブ ラリ を 読み 込ま せる 

許 拡大 画像 を 入れ る た め の コ ン テ ナ を 指定 する 

回 Highslide の 処理 対象 で ちる こと を 示す た め ス タイ ル シ ー ト クラ ス 名 に 「highslide」 を 指定 し 、 ま た 、 キ ャ プシ ョ ン と 対 
応 さ せる た め に id 名 を 指定 する 

医 キャ プシ ョ ン を 指定 する (ID 名 は 「caption-for-」 と Highslide の 処理 対象 で 指定 し た ID 名 を 付加 し た 値 に な る ) 


9 り 当 邊 上 用 EVER 開 交 あ mainjs 


hs .graphiocsDir = "./graphios/" : 一 斑 
hs . out 上 1ineType = "rounded-white" : 一 話 
window.on1oad = fFunotion( ) { 

Ya roo = documen .getE1ementByTdq ( "photoA1bum" ) : 

Yar pOb] = roo .getE1ementsByTagName ( "a" ) : 

For (Var =0: 1<pOb] . 1ength: ュ ++) { 

pOb} [1] .onc1ick = Funoction( ) 【 
return hs .expanQ (this) 





} 
} 
hs .pre1oadTmages ( ) : 一 話 


+ー 


…Highslide で 使用 する 画像 の あめ る フォ ル ダ へ の パス を 指定 する 

… 拡 大 表示 され た 際 の 画像 の 枠 の 形状 を 指定 する 

… 拡 大 表示 され た 画像 が クリ ッ ク さ れ た ら 元 に 戻る よう に する た め の 処 理 を 追加 する 
… 男 像 の プレ ロー ド 処 理 を 行う 


(@ji 抽 9】 昌 上 Highslide が 利用 する 各種 スタ イル シー ト と ID 名 を 指定 する 


Highslide ラ イブ ラリ を 利用 する に は 、highslide.jS フ ァイル を 読み 込ま せま す 。 その 後 、 画 像 フォ ル ダ 
の パス や クリ ッ ク 時 の 設定 を 行い ます 。 拡大 表示 され た 画像 が クリ ッ ク さ れ た ら 元 の サム ネー ル 画 像 に 戻 
る よう に する に は [return hs.expand(this)」 を 指定 し ます 。 表示 され る 画像 の 枠 は 、「hs.outlineType」 
プロ パテ ィ に 下 表 の 値 を 指定 し ます 。 

null 枠 な し 
outer-glow | 発光 
rounded-white | 角 丸 四角 形 ( 白 ) 
drop-shadow | 影 付 き 

beveled ベベ ル 


























HTML 文 書 で は 拡大 画像 を 表示 する た め の コ ン テ ナ (<div id="highslide-container'></div>) を ) 
意 し ます 。 また 、 キ ャ プシ ョ ン や クリ ッ ク 時 に 拡大 され る 画像 な ど に は 、 特 定 の スタ イル シー ト の クラ ス 名 と 
ID 名 を 指定 し ます 。 キャ プシ ョ ン を 表示 する 場合 に は 、<a> タ グ の ID 名 と 「caption-for-」 を 連結 し た 値 を 
<div> タ グ の ID 名 と し て 指定 し ます 。 

な お 、 個 人 利用 の 場合 は 無料 で す が 、 商 用 利用 の 場合 に は 使用 料 を 支払 う 必要 が あり ます 。 詳し く は 、 次 
の サイ ト を 参照 し こく だ さい 。 








http://vikjavev.no/highslide/ 








簿 固 邊 0-3 ヨ IdVHO 





導 圏 邊 0-3 ヨ Id4VHO 








連想 配列 の キー に 数 値 を 使っ て は いけ な い 


JavaScript の 連想 配列 (ハッ シュ ) に は 、 さ ま ざ ま な キー を 指定 する こと が で きま す 。 た だ し 、 連 想 
配列 の キー に 数 値 と 解釈 で きる 文字 列 を 指定 し て は いけ ませ ん 。 これ は 連想 配列 の キー が 数 値 に 変 
換 さ れ 処 理 さ れ て し まう た めで す 。 

次 の サン プル で は 、「C and R 研究 所 ] と 表示 され る は ず で す が 、 予 想 し た 動作 と は 違い 、「 研 究 所 」 
の 文字 が ら 行 に 渡っ て 表示 され て し まい ます 。 つま り 「"1 "」 は 数 値 の 「1」 と 解釈 され て し まう の で す 。 
HTML タ グ を 操作 する 場合 に 「name」 属 性 で 数 値 だ け の 名 前 を 指定 し て は いけ な いと いう の も この 
よう な 解釈 が 行わ れ 予想 と 違う 結果 に な っ て し まう た めで す 。 

連想 配列 は 便利 で す が 連 想 配列 の キー に は 整数 値 と 解釈 で きる 文字 列 は 指定 し な いよ うに 注意 し 
て くだ さい 。 


a = new Ar エ ay(): 

還 LT WMWG am. RW 

a["1"] = "研究 所 ": 

documen .getE] emenEByTdq ( "resu1 七 " ) . innerHTMT, = a[1]+ "<b エ >": 
documen . getE] emenEtByTdq ( "resu] 七 " ) .1nnerHTML,」 += a["1"]+ "<b エ >": 


ーーーー モ ーーーーーー テ ーーー ニー 


OO- @ G:* 埋 末 コ ラム * 第 : > | な | X | Hive Search 


mesomtsmps | 一 | 騙 ・ 団 ・- 亀 ・ 











貞 コン ピュ ー タ | 保護 モー ド : 無効 





連想 配列 の キー に 数 値 と 
解釈 で きる 文字 列 を 指定 
する と 正しく 実行 され な い 















CHAPTER- 05 


ダイ アロ グ / ウ ィ ン ド ウ 








sECTION | | 議 


アラ ー ト ダイ アロ グ を 開く 












デア へ TNNHT 和 へ 愉 眼 0 -4 ヨ 1dVHO 










リン ク を クリ ッ ク す る と リン ク 
先 の URL を アラ ー ト ダイ アロ 
グ に 表示 する 









』 http://www.google.co.jp/ の ペー ジ に 移動 し ます 


本 9 


















eXe@e7 当 目 用 目 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta htEtp-equ1i マ = "ConEen ヒ -t 上 ype" ConEen キ =" ヒ ex 七 /htm] 
Charse モ =uF-8"> 
< 上 1 上 1]e>JavaSorip Samp1e</ 二 1 上 1e> 
<1ink re1="sty1eshee" 上 ype= "tex 上 /css" hrefF="main.CSs5" 
media="a11 "> 
く SC エ 1p 上 tyDe= "上 @x 上 上 / る び aSC エ 1D 七 " S エ C= "ma1m . 8 "></ SC エ ュ エロ ヒ > 
</head> 
<body> 
<h1> リ ンク 集 </h1> 
<u] 1d="disp1ayA1er 上 "> 
<] ><a hreF= "hp : / /Www .yahoo . Co . Jp/ ">Yahoo! Japan へ </a></ ユエ > 
<11><a hreF= "hp : / /www . doog1e . Co . Jp/ ">Goog1e へ </a></ ユエ > 
<] ュ ><a hreF= "hp : / /Www . OPDenSDpC2 . ord/ ">OpenSpaCe へ </a></ ユ エッ > 
< く /u1 テ > 
<u]> 
<11><a hreF="eto .htm1 "> その 他 の ペー ジ へ </a></ 1 ユ > 
<11><a hrefF=" モ op . htm1 "> トッ プペ ー ジ へ </a></ ユエ > 
</u1> 
</body> 
</htm1> 





geg 当 目 用 本 計 輝 main.js 


window .on1oad = fFunotion( ) { 
Ya エ ootNode = documen . detE1 emen モ ByTdq ( "disp1ayA1er ヒ " ) : 
yar 1inkTag = rooNode .getE1ementsByTagName ( "a" ) : 一 馴 
Fo (Yar 1=0: ュ <1inkTag .1ength: ュ ++) 【{ 
1inkTag [1] .onc1ick = fFunction ( ) { 一 婁 
a1er (this .hreF+" の ペー ジ に 移動 し ます " ) : 一 回 
} 


ュー 


豆 … 央 2 
許 リン ク が クリ ッ ク さ れ た と き の 処 理 を 設定 する 
医 アラー ト ダ イア ログ に リン ク 先 URL を 表示 する 


(@j 提 人 】 映 旧 ダイ アロ グ を 表示 する に は 「alert()」 を 使う 


利用 者 に 注意 な ど を 促し た い 場 合 に は 、「alert()」 を 使っ て ダイ アロ グ を 表示 させ る こと が で きま す 。 
「alert()」 の パラ メー タ に 表示 し た い 文字 列 や 数 値 、 変 数 、 オ ブ ジ ェクト な ど を 指定 し ます 。 





サン プル で は 、 特 定 の 領域 の リン ク の み ア ラー ト を 表示 する よう に し て いま す 。 これ は 特定 の ID 名 を 持 
つ <ul> タ グ で 囲ま れ た 範囲 か ら 「getElementsByTagName()」 を 使っ て <a> タ グ を 抽出 し ます 。 抽出 
し た <a> タ グ に クリ ッ ク イ ベン ト を 設定 する こと で 各種 処理 を 行わ むせ る こと が で きま す 。 





Wiil 明 占い ブラ ウザ で は 簡単 な プログ ラム で さえ も わずか な コー ド の 違い で 動作 し な いこ と が ある 


ら 007 年 現在 、JavaScript で プロ グラ ム を 作成 する 場合 、 対 象 と する ブラ ウザ は Internet Explorer 6 
以上 、Firefox、Safari ど 、Opera8 以 上 が 多い で し ょ う 。 し か し 、 こ れ よ り も 古い ブラ ウザ で は ちょ っ と し た こ 
と で も エラ ー と な り 動 作 し な いこ と が あり ます 。 

た と えば 、Mac 版 Internet Explorer5 で は 、 読 み 込 むせ スク リプ ト フ ァイル の プロ グラ ムコ ー ド の 前 後に 
全角 空白 が 入っ て いる と エラ ー に な り ま す 。 全角 空白 が 入っ て いる 場合 に は Safari つ で も エラ ー と な り 、 動 
作 し ませ ん 。 

他 に も 文字 コー ド を UTF-8 な どの ユニ コー ド に する と 、 正 し く 動 作 し な い 場 合 も わり ます 。 スタ イル シー 
ト へ の 対応 も 異な る た め 、 本 書 の よう に HTML フ ァイル 、 ス タイ ル シ ー ト ファ イル 、 ス クリ プ ト フ ァイル を 完 


全 に 分 離す る と 動作 し な いこ と も あり ます 。 古い ブラ ウザ へ の 対応 は 過去 に 記述 され た 数 多く の コー ド を 
参考 に ける の が よい か も し れ ま せん 。 


正常 に 動作 し な い 場 合 の 例 (alert() の 前 に 全角 空白 が 入っ て いる ) 


window.on1oad = Funotion( ) { 
a1er ("Samp1e" ) : 


し る 衣 邊 が 入力 され て いる 











ANNNHNI へ へ 届 目 0 -』 ヨ ldVHO 


SsECTION | 議 


確認 の ダイ アロ グ を 開く 












ここ で は 、 ボ タン を クリ ッ ク し た タイ ミン グ で 確認 の ダイ アロ グ を 開く 方 法 に つい て 解説 し ます 。 

















確認 の ダイ アロ グ が 
表示 され … 














[リセ ッ ト ] ボ タン を 
クリ ッ ク す る と … 


アア ANNNHT へ 上 0 -4 ヨ 14YHO 











ンク [OK] ボ タン を クリ ッ ク 
する と … 


入力 し た 内 容 が リセ ッ ト さ れる 














本 5 全 ま 生 科 モ ーーー 








9 当 目 上 | index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 


<htm1 > 
<head> 
<me ヒ a h 上 上 わ -@Gqu1 マ = "で COnG6n モ type" Conten ヒ ="E 上 ex 上 /htm1: 
CharSe ヒ =u 上 F-8"> * ご 


< モ ュ モ 上 1]e>JavaScrip Samp1e</ ヒ 上 1e> 
<1ink re]="st 上 ylesheet" type="Eex モ /ocss" hrefF="mainm.CS8" 入 。 


med1ia="a11"> + ご 
< く 8SC エ 1p ヒ 上 上 yDe=" ヒ 上 / ]a マ aSC エ 1D 上 " 5S エ o= "ma1m .S"></ SC エ 1D ヒ > 
</head> 
< わ body> 


<h1 > 認証 シス テム </h1> 

<fForm action=" ./regist .cg1" method= "ge" 1d="matnForm' 寺 。 

name= "mainForm"> を ご 
認証 コー ド :<1nput type="tex モ 上 " name= "chkCode" 1d= "chkCode" 邊 
Ya1u@= " "> くわ エッ > ーー 
<1nput type= "Submit" Va1ue=" 送 信 "> 
<1npu t 上 ype="rese 上 " Ya1ue= "リセット "> 

</ Form> 


</ body> 
</htm1]> 


eXeeem 当 目 用 用 本 RS 靖 main.js 


window.on1oad = funotion( ) { 
document . getE1ementByT エ Td ( "mainForm" ) .onrese = Funotion( ) { 一 加 
ェ eturn conFirm ( "本 当 に 消し ます か ?" ) : 一 話 
} 





本 リセ ッ ト ボ タン が 押さ れ た 時 の イベ ント 処理 を 設定 する 
話 確認 の ダイ アロ グ を 表示 する 


(@ 抽 9】 昌 科 確認 ダイ アロ グ を 表示 する に は 「confirm()」 を 使う 


二 者 択 一 の 選択 を 行わ むせ た い 場 合 に は 、「confirm()」 を 使い ます 。 特に 念 の た め 確 認 を 促す 場合 に 有 
効 で す 。 「confirm()」 の パラ メー タ に 表示 し た い 文字 列 を 指定 し ます 。 「confirm()」 は 、[OK] ボ タン が ク 


リッ ク さ れ た 場合 に は 「true」、[ キ ャ ン セ ル ] ボ タン が クリ ッ ク さ れ た 場合 に は 「false」 を 返し ます 。 


サン プル で は 「confirm()」 の 戻り 値 を 「return] で 呼び 出し 元 に 返し て いま す が 、 リ セッ トイ ベン ト が 発生 
し た 際 の 戻り 値 が 「true」 の 場合 は 内 容 が リセ ッ ト さ れ 、「false」 の 場合 は 内 容 は リセ ッ ト さ れず 、 そ の まま に 
な り ま す 。 








AMNNNHTI へ へ 眼 60 -4 ヨ 14VHO 





SE E 比 ( の AN 用 CHAPTER-05 06Z 


@ ぐ 7c 昌 文字 入力 ダイ アロ グ を 開く 











テア ざ ATNNHT へ 交 邊 0 -3 ヨ 1dYHO 











ここ で は 、 文 字 入 力 ダ イア ログ を 開き 、 そ こ に 入力 し た 内 容 を ペー ジ 上 に 表示 する 方 法 に つい て 解説 し ます 。 















ペー ジ が 読み 込ま れる と 入力 
ダイ アロ グ が 表示 され … 





スプ ト ブロ ン ナ ト : 
お 名 前 は ? 








ス ブ ト ブロ ンプ ト : 
お 名 前 は ? 


印 本 一 郎 | 


文字 を 入力 し て [OK] ボ タン 
を クリ ッ ク す る と … 











目 Welcome! 
入力 され た 文字 が ペー ジ 


上 に 表示 され る よう こそ 鈴木 一 郎 さん 











by@)9IX@ 宮 る @) ゅ 


還 目 用 誠 際 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 

<meta htp-equ1Y= "ConEen ヒ -type" conten ヒ = "上 ex 上 /htm1: ) 

Charse ヒ =utF-8 "> キャプ 

< セキュ 上 ]e>JavaSc て ip Samp1e</ ヒ 11e> 

<1ink re]="styleshee" type="tex 上 /css" hreF="main.css" W 

media="a11 "> を ご の 


< く 8C エ 1p 上 上 ype= "ヒヒ / AaVaSC エ 1D 上 " 8 エ C= "ma1m . 8S "></ SC エエ ユヒ > 
</heaqd> 
<body> 
<h1>We1come !</h1> 
<d1V 1d="messade "></d1 マ > 
</body> 
</htm1> 





SOURCE CODE | 目 敵 Mebalg 昌 main.jS 





window .on1oad = fFunotion( ) { 
Ya userName = prompt ( "お 名 前 は ?" , "お 名 前 を 入力 し て くだ さい " ) : 一 名 
ifF (!userName) userName = "名 無 権兵衛 ": 一 上 略 
document . getE1] ementByTd ( "message" ) . 1nnerHTMT, = ゃ 、 m 
"よう こそ "+userName+ "ささ ん": キー 


+ー 


… 入 力 ダ イア ログ を 表示 する 
… 名 前 が 入力 され な か っ た か [キャンセル ] ボ タン が 押さ れ た と き の 処 理 を 指定 する 
… 入 力 さ れ た 名 前 を ペー ジ 上 に 表示 する 


(@jjEg】I 遇 上 六 字 入力 ダイ アロ グ を 表示 する に は 「prompt()」 を 使う 

ダイ アロ グ を 表示 し て 文字 入力 を 行う に は 、「prompt()」 を 使い ます 。 入力 フォ ー ム で の 文字 入力 と 異な 

り 、「prompt()」 で は 文字 を 入力 する か キャ ン セ ル さ れ な い 限 り 、 次 の 処理 に 移る こと が で きま せん 。 強制 
的 に 何 か 入力 させ る 場合 に 「prompt(O」 は 適し て いま す 。 

「prompt()」 の パラ メー タ は ら つ あり 、 最 初 が 表示 する メッ セー ジ 、2 番 目 が あら か じ め 入 力 済み の デー 

タ ( デ フォ ルト 文字 列 ) に な り ま す 。 文字 列 が 入力 され て [OK] ボ タン が クリ ッ ク さ れ た 場合 、「prompt()」 

は 入力 され た 文字 を 返し ます 。 [キャ ン セ ル ] ボ タン が クリ ッ ク さ れ た 場合 に は 「prompt()」 は 「null」 を 返 








。 [キャン セル ] ボ タン を クリ ッ ク し た 場合 









中 Welcome! 








よう こそ 名 無 権兵衛 さん 





[キャ ン セ ル ] ボ タン が ク 
リッ ク さ れ た 場合 は 「 名 無 
権兵衛 」 と 表示 され る 
























NTNNHT へ 上 0 - ヨ ldYHO 








SeakeN 間 昌 | 








[し JCHAPreeosy [legal 


@⑯7ers4 モー ダル ダイ アロ グ を 開く 








ここ で は 、 モ ー ダ ル ダ イ アロ グ を 開き 、 


※ こ の サン プル は 、Internet Explorer の み で 動作 し ます 。 


SNTNNHT へ 層 上 0-d ヨ IdYHO 





そこ に 入力 し た 内 容 を 親 ペ ー ジ に 表示 する 方 法 に つい て 解説 し ます 。 














釣 ホ 一 朗 





夫 コン ピュ ー タ | 保護 モー ド : 無効 


入力 され た 文字 が 親 ペ ー ジ 


名 前 を 入れ て くだ さい 


ペー ジ が 読み 込ま れる と モー ダル 
ダイ アロ グ が 表示 され … 






文字 を 入力 し て [決定 ] ボ タン を 
クリ ッ ク す る と … 











| X | | Live Search 


| @・@・@・ 


< | C:\JavaScript-Sal ・ 2 


2 












Welcome! 
鈴木 一 郎 さん 、 よう こそ 









上 に 表示 され る 








商 コン ピュ ユー タ | 保護 モー ド : 無効 





ReiWXe 事 7 当 目 上 用 index.htm 


< く !DOCTYPE htm] PUBLTC "- 
<htm] > 
<head> 
<meta h 上 D-@Gqu1Y= "で CO 
CharSeG キ =u 上 F-8"> 


/ /W3C/ /DTD HTML, 4.01 TransiEiona1 / /EN"> 


mten ヒ -Eype " Conten セ = "ex 上 /htm1 : 


< ヒュ 1 上 1e>JaVvaSo エ ip 上 Samp1e</ ヒ 1 七 1e> 


<1ink re]="styleshee 
media="a11 "> 


七 " type= "text/css" hreF="main.CSs" 


の 


<8C エ 1p 上 上 ype= "上 ex 上 / る VaSC エ 1 上 " SC= "ma1tn . 8 "></ SC エ ュ エモ > 
</head> 
< く Dbody テ > 
<h1>We1come ! </h1> 
<diy 1d="message "></d1iy> 一 福 
</ bod マ > 
</htm1 > 


本 モー ダル ダイ アロ グ で 入力 され た 文字 列 を 表示 する 領域 を 指定 する 


D@19I〈@ 事 @( 


同定 目 用 用 央 際 name.html 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta h ヒ 上 p- eqdu1= "ConEent-type" conEen ヒ ="tex 上 /htm1 : 
CharSe ヒ =utF-8"> 
< 上 ュ it 上]1e>JavyaScr1pt Samp1e</ 上 上 1@e> 
< く 8C エ 1p 上 上 ype= "ヒモ / AVaSC エ 1D " 5 エ C=" SuD.]S "></ SC エ 1D ヒ > 
</head> 
< くわ ody> 
<h1 > 名 前 を 入れ て くだ さい </h1> 
<fForm> 
<1npu type="tex モ 上" name="userName" 1d="userName"> 一 視 
<1npu 上 type= "buEton" 1d="seBuEon" Va1ue=" 決 定 "> 
</ Form> 
</body> 
</htm1> 





豆 名 前 を 入力 する テキ スト フィ ー ル ド を 指定 する 


K@)9@ 事 @ 





ODE 1 剛 main.js 


w1ndow.on1oad = funotion ( ) { 





Yar uName = showModa1Dia1 og ( "name .htm1 " , window , 
"dia1ogWidth:320px:dia1ogHeight :240px" ) : 」 
document . getE1ementByTd ( "message" ) . innerHTMT, = 
uName+ "さん 、 よ うこ そ ": と に 

















下 モー ダル ダイ アロ グ を 表示 する 
話 入力 さこ れ た 結果 を ペー ジ 上 に 表示 する 





アテ へ TNNHT 和 へ 次 上 60 IaYHO 


アデ ANNNHT へ 上 委 60-3 ヨ IdYHO 








ReWXe 事 9 当 目 用 Sub.jS 


window.on1oad = Funotion( ) { 
document . getE1 emenEByT エ Td ( " se 上 Bu モ Eon" ) .onc1ick = Funotion() { 
window . returnVa1ue = qdocument .qetE1ementByTd ( "userName" ) . マ a1UuG: 一 名 
window .c1ose ( ) : 一 婁 
} 
} 


豆 呼び 出し 元 に 必要 な デー タ を 渡す 
旗 モー ダル ダイ アロ グ を 閉じ る 














@ 人 je】 衣 モー ダル ダイ アロ グ を 表示 する に は 「showModalDialog()」 を 使う 


モー ダル ダイ アロ グ の 表示 は 、「showModaIDialog()」 を 使い ます 。 た だ し 、Inernert Explorer で し か 
動作 し な いた め 注 意 が 必要 で す 。 他 の ブラ ウザ で 同様 の 処理 を 行う に は 、Prototype Window Class な 
どの ライ ブラ リ を 利用 し ます 。 

「showModaIDialog()」 の 最初 の パラ メー タ に 表示 する HTML 文 書 の URL を 指定 し ます 。 番目 の 
パラ メー タ は window、3 番 目 の パ ラメ ー タ は 表示 サイ ズ な どの オプ ショ ン を 指定 し ます 。 指定 で きる オプ 
ショ ン は 下 表 の よう に な り ま す 。 


パラ メー タ 名 内 容 
dialogWidth 表示 する ウィ ンド ウ の 横幅 (ピク セル 数 を 指定 する ) 
dialogHeight ー 表示 する ウィ ンド ウ の 縦 幅 ( ビ ピクセル 数 を 指定 する ) 
dialogLeft ー 表示 位置 (X 座 標 。 ピ クセ ル 数 を 指定 する ) 





















































































dialogTop ー 表示 位置 (Y 座 標 。 ピ クセ ル 数 を 指定 する ) 
2 還 画面 中 央 に 表示 する / し な い ( 表 示す る 場合 は 「yes」 ま た は 「1 」 ま た は 「on]、 表 
Y 示し な い 場合 は 「no」 ま た は 「0」 ま た は 「off」 を 指定 する ) 
Ja 也 印刷 印刷 プレ ビュ ー 時 に 表示 する / し な い ( 表 示す る 場合 は 「yes」 ま た は 「1」 ま 
9 た は 「on」、 表 示し な い 場合 は 「no」 ま た は 「0」 ま た は 「off」 を 指定 する ) 
edge raised ウィ ンド ウ 枠 形状 (「sunken」 は 低い 、「raised」 は 高い ) 
| Help ア イコ ン を 表示 する / し な い ( 表 示す る 場合 は 「yes」 ま た は 「1」 ま た は 「on]」、 
SR り 98 表示 し な い 場合 は [no」 ま た は 「0」 ま た は 「off」 を 指定 する ) 
Eo 6 リサ イズ 可能 / 不 可能 (可能 に する 場合 は 「yes」 ま た は 「1 」 ま た は 「on」、 可 能 に 
攻 し な い 場 合 は 「no」 ま た は 「0」 ま た は 「off」 を 指定 する ) 
スク ロー ル す る / し な い (スク ロー ル す る 場合 は 「yes」 ま た は 「1」 ま た は 「on」、 ス ク 





EN yeS | ロー ル し な い 場 合 は 「no」 ま た は 「0」 ま た は [off」 を 指定 する ) 

























困 ステ ー タ スバ パー を 表示 する / し な い ( 表 示す る 場合 は 「yes]」 ま た は 「1」 ま た は 「on]、 
SR 0 表示 し な い 場 合 は 「no」 ま た は 「0」 ま た は 「of」 を 指定 する ) 
ET 外観 指定 (指定 する 場合 は 「yes」 ま た は 「 1 」 ま た は 「on」、 指 定 し な い 場 合 は 
0 「no」 ま た は 「0」 ま た は 「off」 を 指定 する ) 










「showModalDialog()」 で デー タ が 入力 され た 内 容 を 呼び 出し 元 に 渡す に は 、「window.returnValue」 
プロ パテ ィ に デー タ を 設定 し ます 。 また 、 モ ー ダ ル ダ イ アロ グ を 閉じ る に は 、「window.close0」 と 明示 的 に 
行う 必要 が あり ます 。 

Internet Explorer で は 「showModalDialog()」 以 外 に 、「showModelessDialog()」 も 用 意 さ れ て 
いま す 。 「showModelessDialog()」 は 「showModaIDialog()」 と 異な り 、 表 示 後 も や 呼び 出し 元 の ウィ ン 
ドウ な ど に コン トロ ー ル を 移す こと が で きま す 。 





















Et | 症 CHAPTER-05 069 





W78 が 9』 サブ ウィ ンド ウ を 開く 





ここ で は 、 親 ウィ ンド ウ の ペー ジ を 表示 し た タイ ミン グ で サブ ウィ ンド ウ を 自動 的 に 開く 方 法 に つい て 解説 し 
ます 。 








| 9 vascrpt sample - Wndows tsmet porr 。 
(人 1 今 。|@ cwavascnptsa | ヶ | x uve searen の 
WW 交 @weseptsampe | | 信 ・ 較 ・ 四 < mp 








街 の 定食 屋 さ ん 


今月 の オス ス メ を サブ プ ウ ィ ン ド ウ で 紹介 し て いま す 。 





今月 の オス ス メ ペー ジ が 読み 込ま れる と 、 


当店 自慢 の 豚 の 角 考 で す 。 ぜひ 、 ご 賞味 くだ さい 。 サブ ライ ンド ウ が 表 志 な れる 











gg 当 目 用 用 上 馬 大 条 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta hh 上 上 わ ー@Gdu1 マ = "ConEen ヒ 上 ype" Conten ヒ = "上 ex モ /htm1: = 
CharSe キ =uF-8"> 
< ヒュ 上 1 @> 了 aa8C エ ip Samp1e< / 七 ユミ 上 1e> 
<1ink re1="styleshee" type="Eex 七 /css" hrefF="main.Css" 
media="a11 "> 
<SC エ 1p 上 ype= "ヒヒ / aVaSC エ 1p 上 "5S エ co="matn . 8 "></ SC エ 1 わ 上 > 
</head> 
< く body> 
<h1> 街 の 定食 屋 さ ん < /h1> 
<p> 今 月 の オス ス メ を サブ ウィ ンド ウ で 紹介 し て いま す 。 </p> 
</body> 
< く /htm1] > 





Ki@19| く @ ヨ 


デア へ TNNHT へ 0 -d ヨ IdVHO 








けり ア NTNNHT せ へ 交 上 50 - ヨ ldVHO 








回 当 上 用 用 VERE 拓 前 あゆ mainjs 


window . open ( "sub .htm1" , "sbwin1" , "width=480 , height=320" ) : 一 馴 


の )9I@ 事 %@) 





台 サブ ウィ ンド ウ を 開く (サブ ウィ ンド ウ は 480x320 ピ クセ ル で sub.html フ ァイル が 表示 され る ) 


(@ 損 】 敵 旧 サブ ウィ ンド ウ を 表示 する に は 「window.open()」 を 使う 


サブ ウィ ンド ウ を 開く に は 、「window.open()」 を 使い ます 。 た だ し 、 ブ ラウ ザ の 環境 設定 に よっ て は 表示 
が ブロ ッ ク さ れ 、 動 作 し な いこ と が ある 点 に は 要 注 意 で す 。 書式 は 、 次 の よう に な り ま す 。 


window . open ( "URL " , "ウィ ンド ウ 名 " , "オプ ショ ン 設 定 " , "ヒス トリ 設定 " ) 


サブ ウィ ンド ウ を 開く 「open()」 の 最初 の パラ メー タ に は サブ ウィ ンド ウ に 表示 する ペー ジ の URL を 指定 
し ます 。 と 番目 の パラ メー タ は サブ ウィ ンド ウ の 名 前 (ID 名 ) を 指定 し ます 。 複数 の サブ ウィ ンド ウ を 開く 場 
合 に は 、 こ の 名 前 を 別々 に する 必要 が あり ます 。 サブ ウィ ンド ウ の 名 前 は 、 英 数 字 で 指定 し ます 。 また 、 
Internet Explorer5 以 降 で は 、「_blank」「_parentl「_self」「_top」「search」 も 指定 で きま す 。 
Windows XP(SP 1 まで ) と IE6 の 組み 合わ せ で は 「_media」 も 指定 で きま す 。 

3 番目 の パラ メー タ に は 、 サ ブウ ィ ン ド ウ の 表示 方 法 を 文字 列 で 指定 し ます 。 指定 で きる オプ ショ ン は 下 
表 の よう に な り ま す 。 4 番目 の パラ メー タ は サブ ウィ ンド ウ を 開い た 親 ウ ィ ン ド ウ の ヒス トリ (履歴 ) を 継承 す 
る か が どう か が を 指定 し ます 。 「true」 を 指定 する と 継承 し 、「false」 を 指定 する と 継承 し な く な り ま す 。 

現在 で は 、 サ ブウ ィ ン ド ウ を 開く の は 好ま し く な い 人 傾向 に ありま す 。 本 当 に サブ ウィ ンド ウ を 利用 し な けれ 
ば いけ な い の か どう か 検討 し て か ら 使用 する よう に し て くだ さい 。 また 、 別 の 方 法 と し て Prototype 
Window Class ラ イブ ラリ を 利用 し て ペー ジ 内 に ウィ ンド ウ を 開く と いう 方 法 も あり ます 。 

⑯ サ ブウ ィ ン ド ウ の 表示 方 法 の パラ メー タ 
内 容 
ツー ル バ ー の 表示 / 非 表示 (表示 する 場合 は 「yes」 ま た は 「1」、 非 表示 に する 場合 は 「no]」 
toplbar また は 「0」 を 指定 する ) 


ロケ ーション バー の 表示 / 非 表示 (表示 する 場合 は 「yes」 ま た は 「 1]、 非 表示 に する 場合 
location は 「no」 ま た は 「0」 を 指定 する ) 


呈 雪 ディ レク トリ バー の 表示 / 非 表示 (表示 する 場合 は 「yes」 ま た は 「1」、 非 表示 に する 場合 は 
directories 「no」 ま た は 「0」 を 指定 する ) 


ステ ー タ スバ パー の 表示 / 非 表示 (表示 する 場合 は 「yes」 ま た は 「1」、 非 表示 に する 場合 は 
StatUs 「no」 ま た は 「0」 を 指定 する ) 


メニ ュー バー の 表示 / 非 表示 (Mac を 除く 。 表 示す る 場合 は 「yes] ま た は 「1」、 非 表示 に す 
menubar る 場合 は [no」 ま た は 「0」 を 指定 する ) 

スク ロー ル バ ー の 表示 / 非 表示 (表示 する 場合 は 「yes]」 ま た は 「1」、 非 表示 に する 場合 は 
SCIOIDaTS [no 」 ま た は 「0」 を 指定 する ) 

ウィ ンド ウサ イズ の 変更 可 / 変 更 不可 (変更 可 に する 場合 は 「yes」 ま た は 「1]、 変 更 不可 に 

resizable する 場合 は 「no」 ま た は 「0」 を 指定 する ) 
width ウィ ンド ウ の 内 側 の 横幅 (ピク セル 数 を 指定 する ) 
height ウィ ンド ウ の 内 側 の 高 さ ( ビ ピク セル 数 を 指定 する ) 



































内 容 





innerWidth 





ウィ ンド ウ の 内 側 の 横幅 (ビク セル 数 を 指定 する ) 





innerHeight 


ウィ ンド ウ の 内 側 の 高 さ ( ビ クセ ル 数 を 指定 する ) 





outerWidth 


ウィ ンド ウ の 外側 の 横幅 (ビク セル 数 を 指定 する ) 





outerHeight 


ウィ ンド ウ の 外側 の 高 さ ( ピ クセ ル 数 を 指定 する ) 





screenX 


デス クト ッ プ の 左端 か ら の 座標 (ビク セル 数 を 指定 する ) 





screenY 


デス クト ッ プ の 上 端 か ら の 座標 (ビク セル 数 を 指定 する ) 





titlebar 


タイ トル バー の 表示 / 非 表示 (Mac を 除く 。 表示 する 場合 は 「yes] ま た は 「1」、 非 表示 に す 
る 場合 は 「no」 ま た は 「0」 を 指定 する ) 





channelmode 


チャ ン ネ ルモード (有効 に する 場合 は 「yes」 ま た は 「1」、 無 効 に する 場合 は 「no] ま た は 「0] 
を 指定 する ) 





fullscreen 


全 画 面 ( フ ルス クリ ー ン ) モー ド *1 (有効 に する 場合 は 「yes」 ま た は 「1」、 無 効 に する 場合 
は 「no」 ま た は 「0」 を 指定 する ) 





left 


デス クト ッ プ の 左端 か ら の 座標 (ビク セル 数 を 指定 する ) 





top 


デス クト ッ プ の 上 端 か ら の 座標 (ビク セル 数 を 指定 する ) 





favorites 





お 気に入り の 表示 2 (表示 する 場合 は 「yes]」 ま た は 「1」、 非 表示 に する 場合 は 「no] ま た は 
「0」 を 指定 する ) 


※1 Windows XP SP ら で は 完全 な フル スク リー ン モ ー ド に は な り ま せん 。 
※ ら Mao 版 Internet Explorer の み 有 効 で す 。 
※※ Windows 版 Internet Explorer で は HTA( ア プリ ケー ショ ン ) で な いと 期待 通り 動作 し な い パ ラメ ー タ も あり ます 。 


| オプ ショ ン 名 | IE5 | 


toolbar 


⑯ オ プシ ョ ン の 各 ブ ラウ ザ の 対応 








location 





directories 
status 











menubar 








Scrollbars 
resizable 











width 





height 





innerWidth 


OIOIOIOIOIOIOIOIO[ 量 











innerHeight 





outerWidth 





outerHeight 





ScreenX 





screenY 


OIOIOIOIOIOIOIOIOIO 





titlebar 








生 
channelmode 











fullscreen 





left 





top 





favorites 





OIOIOIOIOIO 














は NAMNNNHT へ 層 委 O -4 ヨ IdaVYHO 







eakeN 間 昌 | 
070 フウ イン ドウ の の ら 邊 ウイ ンド の 09 
ペー ジ を 切り 替え る 








アテ STNNHT へ 上 60 -d ヨ IldVHO 








ここ で は 、 表 示さ れ て いる サブ ウィ ンド ウ の リン ク を クリ ッ ク し た と き に 、 親 ウィ ンド ウ の ペー ジ を 切り 替え る 
方 法 に つい て 解説 し ます 。 











サブ ウィ ンド ウ で * が 付い て い 
な い リ ンク を クリ ッ ク す る と … 












人 イン ター ネッ ト 了 








リン ク 先 の ペー ジ が 親 
ウィ ンド ウ に 表示 され る 

















ReWXe 事 @e 当 目 用 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 
<htm1] > 
<head> 
<meta h 上 上 の わ ーGdu1 ユ マニ "で On ヒ e6n ロ セー 上 ype " Conten ヒ = "ヒヒ /hm] : 
CharSe モ =utF-8"> 
< ヒュ ヒ 1e> 了 aa8SC エ 1p モ 上 Samp1e< / 上 上 1e> 
<1ink re]="sty1esheet" ype="Eex モ 上 /cs5" hrefF="main.CSS" 
media="a11 "> 
く SCr1p 上 上 yDpe= "ex 上 / る VaSC エ 1D 上 " SC= "ma1n .S "></ SC エ 1p ヒ > 
</head> 
< くわ Dody> 
<p>* が 付い て いな い リ ンク 先 は この ウィ ンド ウ に 表示 され ます 。 < /p> 
</body> 
</htm1> 


SeWXaee 可 当 目 用 用 馬 着 了 Sub.html 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta h 上 上 5-@Gqu1 マ = "で Conen ヒ 上 ype" Conten ヒ =" モ ex モ 上 /htm1: = 
Char エ SeG ヒ =utF-8"> 
< ヒュ 上 1e> 了 aaSC て ip Samp1e< / 上 上]@> 
<SC 了 1pt 上 ype=" ヒ ex 七 / る VaSC エ 1D " SC= "SuD . ]S "></ SC エ 1p ヒ > 
</head> 
<body> 
<h1> お 気に入り リン ク </h1> 
<u] 1d="myfFL1ink"> 
<11><a hreF= "htp : / / www .yahoo . Co . Jp/ " 
c1ass= "ot 上 て 1Window ">Yahoo ! </a></ ユエ > 
< ユ 11i><a hrefF= "htp : / /www . goog1e . Co . Jp/ " 
cl1as8= "ct エ 1Window ">Goo9g1e</a></ ユエ > 
<] エ ><a hreF= "hp : / / www . OPDGenSp ご 2 . Or す / ">ODGnSDaC@*</a></ ユ > 
<11><a hrefF="hE て Dp : / /Www . doo . ne . Jp/ " Class= "ct エエ 1W1ndow ">9OO</a> 
< ユエ ><a hreF= "hp : / / www . exC1e . Co . Jp/ ">ExC1@G ネ < /a></ ユエ > 


< く /u]> 
</body> 
</htm1> 
SeXe ヨ lee 当 目 上 用 本 RS 本 半 参 main.js 





window . open ( "sub.htm1" , "sbwin1" , "width=480,height=320" ) : 一 騙 


台 | サブ ウィ ンド ウ を 開く 








VNNNNHT へ GO -d ヨ IaVYHO 


アテ ぴ へ TNNHT へ 上 0 -3 ヨ 1dVHO 





ReWXeseeg ヨ 当 目 用 | 本 本間 輝 main.js 


window .on1oad = fFunoction( ) { 
Ya oo = documen .getE1emenEByTq ( "myfELink" ) : 
Yar aTagd = 1 だ 
For (Var =0: <aTag.1ength: ュ ++) { 
ifF (arTag[i] .c1assName .mach ( /cC モ エエ 1Window/ ) ) { 一 話 
aTag [1i] .onc1ick = Funotion ( ) 【 に 」 
w1ndow . opener . 1ocation.hrefF = his .href : 
reEturn fa]1S@: 
5 
} 


トー 


…:<a> タ グ の 情報 を 取得 し 、 タ グ の 数 だ け 繰 り 返 す 

…<a> タ グ の スタ イル シー トク ラス を 調べ て 「ctrlIWindow」 ク ラス が 設定 され て いる 場合 の み 親 ウィ ンド ウ へ の 操作 を 行 
う よ う に する 

… ク リッ ク さ れ た ら 「window.opener」 を 使っ て 呼び 出し 元 の 親 ウ ィ ン ド ウ を 操作 する 


回 回 回 


(@ 損 滑 】 郁 サブ ウィ ンド ウ か ら 親 ウィ ンド ウ を 操作 する に は 「window.opener」 を 使う 


サブ ウィ ンド ウ か ら 呼 び 出し 元 の 親 ウィ ンド ウ を 操作 する に は 、「window.opener」 を 使い ます 。 た と えば 、 
「window.opener.document.DgColor」 と する と 、 親 ウィ ンド ウ の 背景 色 を 参照 / 設 定 す る こと が で きま す 。 
サン プル の よう に 親 ウィ ンド ウ に 任意 の ペー ジ UHRHL を 設定 する に は 、「window.opener.location.hrefl」 と 
指定 し ます 。 

親 ウ ィ ン ド ウ が 閉じ られ て いる 場合 は 、Internet Explorer 以 外 で は 「window.opener」 は 「nulll を 返し 
ます 。 Internet Explorer で は Object を 返し て し まう た め 、「window.opener.closed]」 プ ロ パ ティ の 値 を 
調べ て 親 ウ ィ ン ド ウ が 閉じ られ て いる か どう か 調べ ます 。 親 ウ ィ ン ド ウ が 閉じ られ て いる 場合 に は 「true」、 閉 
じ ら れ て いな い 場 合 は 「false」 と な り ま す 。 











(Wiil ウイ ルス ガー ド ソ フト に 注意 する 
ウイ ルス ガー ド ソ フト (ウイ ルス 対策 ソフ ト ) や イン ター ネッ ト セ キュ リティ 関連 の プロ グラ ム が イン スト ー 
ル さ れ て いる 場合 、JavaScript の コー ド が ペー ジ 上 に 追加 され て し まい 、 予 想 と は 違っ た 動作 を 及ぼ すこ 
と が あり ます 。 


この よう に 勝手 に プロ グラ ム が 追加 され た りす る 可能 性 も 含め て JavaScript コ ー ド を 制作 する と いう 
の も 考慮 し てこ お く と よい で し よう 。 










ヨミ ekeN 開 昌 | 


0 用 有 | ペー ジ を 切り 替え る 


親 ウ ィ ン ド ウ か ら サ ブウ ィ ン 


| ICHAPTER-o5 pl lozi 


ドウ の 








ここ で は 、 親 ウィ ンド ウ に 表示 され て いる リン ク を クリ ッ ク し た と き 、 サ ブウ ィ ン ド ウ に 、 そ の リン ク 先 の ペー:> 


を 表示 する 方 法 に つい て 解説 し ます 。 









層 PARe ーーーー 
@ 〇 ・ | @ htp://192.168.1. <|s|x | uve search 
| | 合っ <- 還 の 


- 久 |@ eooptsompe 
お 気に入り リン ク 集 





lll 
内 





> 





























* が 付い て いな い リ ンク を 
クリ ッ ク す る と … 








この ペー ジ を カス タマ イズ する | ログ イン 


Google 


ダル ー ブ more ぁ 





ウェ ブ イメ ー ジ 


Google 検索 


@ ウェ ブ 全 体 か ら 検索 @ 


2 














還 










Ja Fee8ee Lee 
5 日 本 語 の ペー ジ を 検索 














- Google | に つい て - 人 材 募 集 - Google_com in 





リン ク 先 の ペー ジ が サブ ウィ ンド ウ 
に 表示 され る 





テテ MANRNNYH 和 へ 目 GO -4 ヨ IdaYH う 
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ReWXee り 当 目 用 目 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transiiona1 / /EN"> 
<htm1 > 
<head> 
<mea h 上 上 p-equ1Y= "ConEen ヒ -type" Conten セ ="Eex 七 /htm1] : 
CharSse ヒ =utF-8"> 
< ヒュ 上 16> 了 aaSC エ ip 上 Samp1e</ ヒ 1 上 1e> 
<1ink re1]="sty1esheet" type="Eext/css" hrefF="main.CS8" 
media="a11"> や - 
ぐ 8C エ 1p 上 上 yDe= "上 @ ヌ 上 / る ひみ SC て 1D 七 " 8S エ C= "matn . 8S"></ SC エ ュ 1p ヒ > 
</head> 
< く bod ア > 
<h1> お 気に入り リン ク 集 </h1> 
<u1] 1qd="myfELiinmk"> 
<11><a href= "htp : / /www . yahoo . Co . Jp/ " 
Class= "ct 上 1W1ndow ">Yahoo ! </a></ ユエ > 4 
<11><a hrefF="hEEp : / /Www . doog1e . co. Jp/" 
Class8="cC 上 エ 1Window ">GooJ1e</a></ ユエ > 
< ユエ ><a hreF= "hp : / / www . OPDenSpC2 . Or す / ">OpeGnSDaC@G*</a></ ユ > 
<1 ユ 1><a hreF= "hp : / / www . 9oo . ne . Jp/" c1ass= "oc 上 エ 1Window">9oOo</a> 
<11><a hreF= "hp : / /Www . exC1e . CO . Jp/ ">EXC1 七 G ネ </a></ ユエ > 
く /u1> 
</body> 
</htm1> 


豆 | サブ ウィ ンド ウ に 表示 する リン ク の <a> タ グ の 「class」 属 性 に 「ctrIWindow」 を 設定 する (サブ ウィ ンド ウ に 表示 し な い 
合 は 設定 し な い ) 


RelWXeqeem 当 上 朋 用 中 sub.html 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 
<meta hEp-equ1= "ConEen ヒ -type" ConEen ヒ ="Eex 七 /htm] : 
CharSe ヒ =utF-8"> 
< モ ュ 1 上 1e>JavaSor1ip 上 Samp1e</ ヒ 1 上 1e> 


</head> 
< くわ bod テ > 
<p>* の 付い て いな い リ ンク 先 は この ウィ ンド ウ に 表示 され ます 。 < /p> 
</body> 
</htm] > 





Eeee 当 目 用 | main.js 


Ya SubW1n = っ 回 
window . open ( " sub . htm1 " , "sbwin1 " , "w1d モ h=480 ,height=320") : ーー 
window .on1oad = Funotion( ) { 
Ya oo = document .getE1] ementByTdq ( "myfFLink" ) : 
Yar aTag = roo .getE1ementsByTagName("a" ) : 回 
For (Var =0: 1<aTag-.1ength: ュ ++) { 
ifF (aTag[i] .c1assName .maEch ( / ct 上 r1Window/ ) ) {一族 
aTag [1] .onc1ick = funotion( ) { に 
SubWin.1ocation.href = his.href: 
return Fa]se: 
} 
} 
} 


トー 


… サ ブウ ィ ン ド ウ を 開く 

…<a> タ グ の 情報 を 取得 し 、 タ グ の 数 だ け 繰 り 返す 

…<a> タ グ の スタ イル シー トク ラス を 調べ て 「ctrlWindow」 ク ラス が 設定 され て いる 場合 の み サ ブウ ィ ン ド ウ へ の 操作 を 
行う よう に する 

… ク リッ ク さ れ た ら サ ブウ ィ ン ド ウ の ペー ジ URL を 書き 換え る 


回 回 回 


(@⑯ 柄 問 得 サブ ウィ ンド ウ を 操作 する に は 「window.open()」 の 戻り 値 を 使う 


親 ウ ィ ン ド ウツ か ら サ ブウ ィ ン ド ウ を 操作 する に は 、「window.open()」 の 戻り 値 を 変数 に 入れ て お きま す 。 
この 戻り 値 が サブ ウィ ンド ウ を 操作 する た め の 情 報 に な り ま す 。 「window.open()」 の 戻り 値 は サブ ウィ ン 
ドウ を 示す こと に な る た め 、 サ ンプ ル の よう に 変数 「subDWin」 に 「window.open()」 の 戻り 値 を 入れ た 場 
合 、「subWin.Iocation.href] と する こと で サブ ウィ ンド ウ の UHL を 変更 する こと が で きま す 。 同様 に 
「subWin.document.DgColor」 と する と 、 サ ブウ ィ ン ド ウ の 背景 色 を 参照 / 設 定 す る こと が で きま す 。 

た だ し 、 サ ブウ ィ ン ド ウ の 内 容 が 別 ド メイ ン の ペー ジ な ど に 更新 され た 場合 は 、 セ キュ リティ の 関係 で 参照 
する こと が で き な く な り ま す 。 

また 、 サ ブウ ィ ン ド ウ が 閉じ られ て し まっ た 場合 に は 、 操 作 す る こと が で きず に エラ ー に な り ま す 。 サブ 
ウィ ンド ウ が 閉じ られ て いる か どう か は 、「closed] プ ロ パ ティ で 調べ る こと が で きま す 。 た と えば 、 変 数 
「subWin」 に 「window.open()」 の 戻り 値 が 入っ て いる 場合 、「subWin.closed」 と し て 調べ る こと が で 
きま す 。 「closed」 プ ロ パ ティ が 「true]」 で あれ ば 閉じ られ て 、「false] で あれ ば 閉じ られ て いな いこ と に な 
り ま す 。 














[ii 明 タブ は JavaScript か ら 制 御 で き な い 


Firefox、Safari、Internet Explorer7 な ど 多 く の ブ ラウ ザ は 、 同 じ ウ ィ ン ド ウ 内 に 別 ペ ー ジ を 表示 する 
タブ 機能 が あり ます 。 タブ を クリ ッ ク す る こと に より 、 異 な る ペー ジ を 表示 で きま す 。 JavaScript で は サ 
ブウ ィ ン ド ウ を 制御 する こと が で きま す が 、 タ ブ で 開か れ て いる ペー ジ に アク セス する こと は で きま せん 。 


これ は セキ ュ リ ティ の 都合 で は な く 、 単 純 に アク セス する 手段 が 用 意 さ れ て いな いた めで す 。 








NAMNTNNNHN へ 上 当 60 -4 ヨ 14VHO 









SeekeN 問 | 





[| jcHAprEko5 | oz2 








表示 する 


ペー ジ 内 に マル チワ ウィ ンド ウ を 
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ここ で は 、Prototype Window Class ラ イブ ラリ を 利用 し て 、 ペ ー ジ 内 に マル チ ウ ィ ン ド ウ を 表示 する 方 法 








に つい て 解説 し ます 。 

攻 2 ae ーー ニニ IE 
Cc の ・ | @ c:wJavascript-Samplew05_window\05-0( < | 信 | x 旧 uve search jp ・| 
SS < | 給 JavaScript Sample 合 ・ ー ニー に ke ー ル (O) マ 


メッ セー ジ ボ ー 


| セー ジ 《 表 示す る 


に 1] 




















ペー ジ が 表示 画 








ボタ ン を クリ ッ ク す る と … 





ペー ジ 内 に ウィ ンド ウ が 
ら 枚 表示 され る 











Seee9 当 目 有 用 本 誠 珍 index.htm 


@yasorpt somps WindGOWS Intermet Explorer - 上 還 四 "<"| 
(の: | @ Cavascrpt-samplew05_windoww05-0( ・| な | x LMe search ら ・| 
SY < | 紛 avaScript Sample 信 ・ 還 ・ 時 ・ は ペー ジ (P) マ 縛 ツー ル (O) マ 
に き 
セー ジン ボー 
メッ セー ジ を 表示 する 
@ ら の @ メッ セー ジ 1 
ーー 一 剛一 ーーーーーーー 一 =- 
ペー ジ が 表示 され 凍 コン ピュ ー タ | 保護 モー ド : 無効 電 10096 ・ 


<!DOCTYPE htm1] PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 


<htm] > 
<head> 
<meta h ヒ 上 わ -@equ1i マ = "で Conen ヒ 上 ype" Conten ヒ =" ヒ ex 七 /htm] : 
CharSe ヒ =uF-8 "> 





< ヒュ 七 1@> ゴ aaSC エ 1p ヒ Samp1e</ ヒ ュ ヒ 1@> 
<1ink re]="styleshee 上 " hreF="defau1]t.css" = 
type= "tex モ 上 /css" media="a11"> を の 
<1inik re1="sty1leshee" type="exE/csS" キョ 
hrefF="main.CsS" media="a11 "> ャ ンー 
<8C エ 1p 上 上 ye= "上 Gx 上 / る で aSC エ 1D 上 "SroC= "prototyDe . ]S "> く / SC エ 1D セ > 
< く 8C エ ip 上 ype= "上 @x 上 / る び aSC エ 1D 上 " Sro="eFFeos . 8S "></ SC エ 1p セ > 
<8C 了 1p 上 ype= "ヒモ / Ja マ aSC エ 1p " 5S エ Cc= "Wi1nmdow .]S "></ SC エ 1D セ キ > 
<8C エ 1p 上 上 ype= "上 @Gx 七 / る VaSC エ 1D 上 " SC= "ma1m .S "></ SC エエ ロ ヒ > 

</head> 

< くわ body> 
<h1> メ ッ セ ー ジ ボー ド </h1> 
<Form acion=" . /mu1 モ ti .Cg1" method= "ge 上 " name="matinForm"> 

<inpuE type="buEon" 1d="openBut モ on" で a1ue= "メッ セー ジ を 表示 する "> 

</ Form> 

</body> 

</htm1 > 


の 90I@ 事 9@), 


国 朋 有用 本 RS 本 靖 mainjs 


window.on1oad = funoction( ) { 
document . getE1ementByTd ( "openBuEon" ) .onc1ick = fFunotion ( ) { 
mu1tiWindow . open ( "win01" , "メッ セー ジ 1" , 80, 100, 320, 240): 回 
mu1tiWindow . open ( "win02" , "メッ セー ジ 2" , 160, 160, 320, 240): 





} 
Yar mu1tiWindow = { 
open : Funotion (winTD, wTit1e, xx, , W, h) ( 
Ya win = new Window(winTD, { 
モ ュ it]1e: wTit1e, ol]assName: "dialogd", 
top:y, 1efEt:x, width:w, height:h, zTndex: 100, 
reS1zab1e: rue, draggab1 e : 上 ue 
} ) : 
win . setDestroyOnC1ose( ) : 一 上 話 
win .show( ) : 一 医 
win . setHTMLCon モ en ( "メッ セー ジ は あり ませ ん 。 " ) : 一 回 


+ー 


…Prototype Window ClasS ラ イブ ラリ を 利用 し て ウィ ンド ウ を 開く 

… 表 示す る ウィ ンド ウ の 名 前 や サイ ズ を 設定 する 

… ウ ィ ン ド ウ が 閉じ られ た ら ウ ィ ン ド ウ に 関す る オブ ジェ クト を 削除 する よう に 設定 する 
… ウ ィ ン ド ウ を 表示 する 

… ウ ィ ン ド ウ の ペー ジ 内 に 文字 を 表示 する 


回 回 回 回 回 


へ NTNNHT 和 へ 層 邊 0 -d ヨ 1dVHO 





アマ ヽ TNNH す へ 層 委 60 - ヨ 14VHO 








@7jfElge】I 映 画 ペ ー ジ 内 に マル チ ウ ィ ン ド ウ を 表示 する に は Prototype Window Class ラ イブ ラリ を 利用 する 


Prototype Window Class ラ イブ ラリ を 利用 する と 、 手 軽 に ペー ジ 内 に マル チ ウ ィ ン ド ウ を 表示 する こ 
と が で きま す 。 Prototype Window Class ラ イブ ラリ を 動作 させ る に は prototype.jS ラ イブ ラリ と 
SCript.aculo0.us ラ イブ ラリ の エフ ェクト (effects.jS) ファ イル が 必要 な の で 、 あ ら か じ め 、prototype.jS 
ライ ブラ リ と script.aculo.us ラ イブ ラリ の ファ イル を 読み 込ま せ て お きま す 。 

ウィ ンド ウ を 生成 する に は 、「new Window()」 と し ます 。 最初 の パラ メー タ に ウィ ンド ウ ID を 指定 し ます 。 複 
数 表示 する 場合 に は 、 こ の ウィ ンド ウ ID が 重複 し な いよ うに し て くだ さい 。 番目 の パラ メー タ は オプ ショ ン パ 
ラメ ー タ で プロ パテ ィ リ スト (ハツ ッ シュ) 形式 で 指定 し ます 。 指定 で きる パラ メー タ は 、 下 表 の よう に な り ま す 。 

また 、 ウ ィ ン ド ウ が 閉じ られ た ら 、 ウ ィ ン ド ツウ 情 報 ( ウ ィ ン ド ウオ ブ ジ ェクト ) も 破棄 する よう に 「setDestroy 
OnClose(0)」 を 指定 し ます 。 これ を 指定 し な いと 、 内 部 で は ウィ ンド ウ 情 報 が 到 っ た まま に な り ま す 。 ウィ ン 
ドウ を 表示 する に は 、「show()」 を 使い ます 。 表示 され た ウィ ンド ウ 内 に 文字 な ど を 表示 する に は 、 
「setHTMLContent()」 を 使い ます 。 

ウィ ンド ウ の ドラ ッ グ 、 リ サイ ズ 、 ク ロー ズ な どの 処理 は 自動 的 に 行わ れる た め 、 特 に 指定 する 必要 は あり 
ませ ん 。 























名 前 
className クラ ス 名 

tile ウィ ンド ウタ イト ル 

Url URL( 別 ペー ジ を 表示 する 場合 に 指定 ) 
parent ウィ ンド ウ の 親 ノ ー ド 
top 0 ウィ ンド ウ の 表示 Y 座 標 (上 ) 
ウィ ンド ウ の 表示 Y 座 標 ( 下 ) 
ウィ ンド ウ の 表示 X 座 標 ( 左 ) 
ウィ ンド ウ の 表示 X 座 標 ( 右 ) 
横幅 



































































width 























height 縦 幅 

maxWidth 最大 幅 ( 横 ) 
maxHeight 最大 幅 ( 縦 ) 
minWidth 100 最小 幅 ( 横 ) 
minHeight 20 最小 幅 ( 縦 ) 








リサ イズ 可能 フラ グ (true : リサ イズ 可能 、false : リサ イズ 不可 ) 
クロ ー ズ 可能 フラ グ (true : クロ ー ズ 可能 、false : クロ ー ズ 不可 ) 
最小 化 ボ タン (true : ボタ ン あ り 、false : ボタ ン な し ) 
最大 化 ボ タン (true : ボタ ン あ り 、false : ボタ ン な し ) 

ドラ ッ グ 可能 フラ グ (true : ドラ ッ グ 可能 、false : ドラ ッ グ 不可 ) 


ウィ ンド ウ 表 示 時 の エフ ェクト 





resizable true 
closable true 
minimizable true 
maximizable true 
draggable true 


Effect.Appear ま た は 
Element.show 


Effect.Fade ま た は 
Element.hide 


showEffectOptions none 
hideEffectOptions none 







































showEffect 













hideEffect ウィ ンド ウ ク ロ ー ズ 時 の エフ ェクト 
















ウィ ンド ウ 表 示 時 の エフ ェクト オプ ショ ン (script.aculo.us 参 照 ) 
ウィ ンド ウ ク ロ ー ズ 時 の エフ ェクト オプ ショ ン (script.aculo.us 参 照 ) 
エフ ェクト オプ ショ ン (script.aculo.us 参 照 ) 

読み 込み が 完了 し た 時 に 呼び 出す 処理 

不透明 度 (0 一 1.0) 

















effectOptions none 








onload none 








opacity 1 
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Prototype Window ClasSs ラ イブ ラリ を 
利用 し て アラ ー ト ダイ アロ グ を 表示 する 








ここ で は 、Prototype Window Class ラ イブ ラリ を 利用 し て 、 ペ ー ジ が 読み 込ま れ た タイ ミン グ で 、 ペ ー ジ 
内 に アラ ー ト ダイ アロ グ を 自動 表示 する 方 法 に つい て 解説 し ます 。 











ペー ジ が 表示 され る と アラ ー ト 
ダイ アロ グ が 表示 され る 


し て か ら 視 臣 さい 









< ss na 1 
画 コン ピュ ー タ | 保護 モー ド : 無効 



















ReIWXe%e 当 目 用 | index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transiiona1 / /EN"> 
<htm] > 
<head> 

<meta hh 上 上 わ -eGqu1 マ = "ConEen ヒ -t 上 ype" ConEen ヒ = "上 ex 上 /htm1 : 
CharSe ヒ =utF-8"> 
< モ ュ 1 上 1e>JavaSorip 上 Samp1e</ 上 1 上 1e> 
<1ink re]="sty1esheet" hrefF="defFau1.oss" 
type= "text/oss" media="a11"> 
<1ink re]="sty1esheet 上 " hrefF="a1er.Css" tyDe= "text/css" 
media="a11 "> 
<1ink re1="styleshee" type="Eex/css" hreF="main .Css" 
med1ia="a11 "> 
で SC エ 1Dt 上 yDe= " 七 広 上 / る で aSC エ 1D ヒ "5 エ C= "prototyDpe . 8 "></ SC エ 1D ヒ > 
< く 8Cr1p 上 上 ype= "上 ex 上 / avVa8C エ 1p 上 " sro="eFFeocs . ]S "></ SC エ 1p ヒ > 
く SCr1p 上 ype= "ex / avVaSC エ 1p ヒ "src="w1ndow . 8 "></ SC エ 1D セ > 
く 8C エ 1p type= "Eeex 七 /aVaSC エ 1p" Sro= "ma1n . 8 "></ SC エ 1Dp キ > 


</headqd> 
<body テ > の 


MANMNNNNHTI へ 必 当 SO -4 ヨ IdAYHO 





アデ SVNNNHT へ 上 0 -d ヨ 」dYHO 











<h1>Cgamp : R 工 房 </h1> 
Ep 7 
</body> 
</htm] > 


豆 必要 な ライ ブラ リ と スタ イル シー ト フ ァイル を 読み 込む 


SeiWXYemee 当 目 用 用 本 本 交 main.js 


window.on1oad = Funotion ( ) { 
Dia1og .a1er ( "部 屋 を 明る くし て か ら 御 覧 くだ さい " , { 
w1ndowParameters: (width:320, height:100} , 
okLabe] : "は い " 





台 アラ ー ト ダイ アロ グ を 表示 する 





(@⑲ji 計 】 映 議 アラ ー ト ダイ アロ グ を 表示 する に は Prototype Window Class ラ イ ブラ リ の 「Dialog.alert()」 を 使う 


Prototype Window Class ラ イブ ラリ に は 、 ア ラー ト ダ イア ログ を 表示 する た め の 「Dialog.alert()」 
メソ ッ ド が 用 意 さ ご れ て いま す 。 最初 の パラ メー タ に 表示 する メッ セー ジ を 指定 し ます 。 番目 の パラ メー タ 
に オプ ショ ン を 指定 し ます 。 指定 で きる オプ ショ ン は 、 下 表 の よう に な り ま す 。 [OK] ボ タン が クリ ッ ク さ れ た 
と き の 処 理 な ど を 指定 する こと が で きま す 。 



























top 
left 
okLabel 

Ok 
buttonClass 
















OK ボタ ン に 表示 する 文字 列 
OK ボタ ン が クリ ッ ク さ れ た と き の 処 理 
OK ボタ ン に 適用 する CSS ク ラス 名 



















(@[i 明 JavaScript の グラ フィ ックス ライ ブラ リ 
JavaSoript で は 、 グ ラフ ィ ッ クス 処理 を 行う こと が で きま せん 。 HTML タ グ の <ocanvas> と 組み 合わ せ 
る こと で グラ フィ ックス を 扱う こと が で きま す が 、Internet Explorer で は <canvas> タ グ が サポ ー ト され 
て いま せん 。 多く の ブラ ウザ で 長方形 や 椿 円 な ど 基 本 図形 を 描画 し た い 場 合 に は 、 次 の グラ フィ ックス ライ 
ブラ リ が 利用 で きま す 。 


http://Www.walterzorn.com/index.htm 
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リプ | Prototype Window ClasSS ラ イブ ラリ 
を 利用 し て 確認 ダイ アロ グ を 表示 する 











ここ で は 、Prototype Window Class ラ イブ ラリ を 利用 し て 、 ペ ー ジ が 読み 込ま れ た タイ ミン グ で 、 ペ ー ジ 
内 に 確認 ダイ アロ グ を 自動 表示 する 方 法 に つい て 解説 し ます 。 















CD - | @ Cavascnipt-Sa -| ヶ | x lesera 


寺 区 | @ vasonpt sample 還 人 角 ・ 加 ・ 届 ・ 


| 映画 批評 


よう こそ 。 ネタ バレ に 注意 し て くだ さい 。 


















を 開 覧 し ます カ 


ESN 


ペー ジ が 表示 され る と 確認 
ダイ アロ グ が 表示 され る 








RelWXewe 当 目 朋 | index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 
<htm1] > 
<head> 

<meta hh 上 上 D-equ1 マ = "ConEen ヒ -type" ConEen ヒ ="Eex/htm] : 
CharSeG ヒ =u 上 F-8"> 
< ヒュ 16> 了 JaVaSC て ip 上 Samp1e</ 七 上 1e> 
<1ink re]="styleshee" hreF="defau1t.css" 
type=" て tex 上 /csS" media="a11"> 
<1ink re1="stylesheet" hrefF="a1er .CsSs" 
type= "ex 上 /css" media="a11"> 
<1ink re]="styleshee" type= "Etex/css" 
hreF="mainm.cCss" media="a11 "> 《 


<8SC エ 1p 上 ype= "ex 上 /aVaSC エ 1p" 
<SCr1pt type= "tex 七 /aVaSCr1p" 
< く 8C エ 1pt 上 ype= "上 ex 上 / avVaSC エ 1p" 
< く SC エ 1p ype= "ex 七 / aaSC エ 1p ヒ " 
</head> 
< くわ body> 


8 エ ご = "や Oo モ otyDe . 8 "></ SC エエ ユヒ > 
SC="eFFeos . 8 "></ 8C エ 1p ヒ > 

8 と で = "winmdow . ]S "></ SC エ ュ D ヒ > 
SC= "ma1in . 5 "></ SC エエ キモ > 





アア ふさ TNNHT 和 へ 層 上 委 S0 -d ヨ 14VYHO う 


<h1 > 映画 批評 </ ロ 1> 
よう こそ 。 ネタ バレ に 注意 し て くだ さい 。 
</body> 
</htm1] > 





副 必要 な ライ ブラ リ と スタ イル シー ト フ ァイル を 読み 込む 


Re)WXemee り 当 目 用 用 本 計 輝 main.js 


window.on1oad = fFunoction ( ) { 
Dia1og . confirm ( "本 当 に この ペー ジ を 閲覧 し ます か ?" , { 
windowParameters: {widqdth:300, height : 60} , 
okLhabe1 : "は い ", 
cance1rabe1] : "いい え ", 
ok : Eunoction (win ) { a1ert ( "で は 御覧 くだ さい " ) : return rue: }, 
canoe1] : Funo1on (win ) { a1ert ( "閲覧 を 中 止 し ます " ) : return true: } 
7 





回 確認 ダイ アロ グ を 表示 する 











(@jj 抽 人間 蘭 確認 ダイ アロ グ を 表示 する に は Prototype Window Class ラ イブ ラリ の 「Dialog.confirm()」 を 使う 





Prototype Window Class ラ イブ ラリ に は 、 確 認 ダ イア ログ を 表示 する た め の 「Dialog.confirm(0)」 メ 
ソ ッ ド が 用 意 さ れ て いま す 。 最初 の パラ メー タ に は 、 表 示す る メッ セー ジ を 指定 し ます 。 2 番目 の パラ メー 
タタ に は 、 オ プシ ョ ン を 指定 し ます 。 指定 で きる オプ ショ ン は 下 表 の よう に な り ま す 。 [OK] ボ タン や [キャン セ 
ル ] ボ タン が クリ ッ ク さ れ た と き の 処 理 な ど を 指定 する こと が で きま す 。 





アバ ヽ NTNNHT へ 層 上 0 -3 ヨ 1dVHO 


top Y 座 標 

left X 座 標 

okLabel OK ボタ ン に 表示 する 文字 列 

cancelLabel キャ ン セ ル ボ タン に 表示 する 文字 列 

ok OK ボタ ン が クリ ッ ク さ れ た と き の 処 理 
cancel キャ ン セ ル ボ タン が クリ ッ ク さ れ た と き の 処 理 
buttonClass | OK ボタ ン に 適用 する CSS ク ラス 名 























(Wi 情報 ウィ ンド ウ 


Prototype Window Class は 情報 ウィ ンド ウ を 表示 する こと が で きま す 。 これ は 次 の よう に 
「Dialog.info)」 を 使い ます 。 





Dia1og . info ( "現在 ダウ ン ロ ー ド 中 で す " , { 
windowParameters: {wiqdth:300, height : 60} , 


ShowProOgreS8 : 上 ヒエ uG 
} ) 













eke 咽 | CHAPTERO5 ヶ | oz5 
月 別に サブ ウィ ンド ウ に 
人 ララ イル や 画像 を 表示 する 


ここ で は 、 月 ご と に 異な る ファ イル や 画像 を 、 サ ブウ ィ ン ド ウ に 表示 する 方 法 に つい て 解説 し ます 。 








Reie ヨ mse 当 目 上 用 用 想 天 了 index.htm ーー 
<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm] > 

<head> 


<me ヒ a h 上 上 わ -Gqdu1 マ =" ConEen ヒ -type" conEen ヒ ="Eex/htm1 : 
Cha エ SeG キ =u 上 F-8"> 
< ヒュ 1 上]e>JaVaSC エ 1p Samp1e</ ヒ ュ ヒ 上 1e> 
<1injk re1="sty1eshee" type="Eex モ /css" hrefF="main.CS5" 
media="a11 "> 
< ぐ SC 了 ip tyDe=" ヒ ex / JaVaSC エ 1D 上 " Sr エ oC="matn . 8"></ SC エ 1D キ > 
</head> 
<body> 
<h1 > 徒然 日 記 </h1 > 
<p> 今 月 の 一 言 は 別 ウ ィ ン ドウ で 表示 し て いま す 。 </p> 
</body> 
</htm1]> 


Seee 当 目 用 用 本 本 計 main.js 


var dateOb] = new Date( ) : 一 頭 
Yar n = dateOb〕] . getMonth() + 1: 一 略 
window . open ( "pages/"+n ロ +" .htm1" , "sbwin" , "width=480 ,height=320" ) : 一 略 


人 NNNNHT へ へ 層 0 -3 ヨ IdVYHO 


台 「Date」 オ ブ ジ ェクト を 生成 する 
話 現時 点 で の 月 を 求め る (「getMonth()」 は 1 少な い 値 を 返す の で 1 を 加算 する ) 
話 求め た 現時 点 で の 月 の 値 と ファ イル 名 を 組み 合わ せ た パ ス を 指定 する 























@jj3】 遇 上 ファ イル 名 と 月 の 値 を 組み 合わ せる 

H 別 に サブ ウィ ンド ウ に 表示 する ペー ジ を 変え る に は 、 あ ら か じ め 月 別に ファ イル を 用 意 し て お きま す 。 
この 時 、 フ ァイル 名 に 工夫 を し 、 月 の 値 を 含め る よう に し ます 。 た と えば 、 フ ァイル 名 を 「1 .htm]~ 
「12.htmll の よう に し て お きま す 。 サブ ウィ ンド ウ を 開く 際 に 「Date」 オ ブ ジ ェクト で 現在 の 月 を 求め ます 。 




















ファ イル 名 と 求め た 月 の 値 を 組み 合わ せ た パ ス を サブ ウィ ンド ウ の 最初 の パラ メー タ に 指定 する こと で 月 
別に 異な る ペー ジ を サブ ウィ ンド ウ に 表示 する こと が で きま す 。 








関数 定義 の 動作 の 違い 


「function」 を 使っ て 関数 を 定義 する 場合 に 、 す で に 関数 が ある か どう か 調べ て か ら 処 理 し た い 場 合 
| が あり ます (関数 の オー バー ライ ド )。 通常 は 「if] 命 令 ま た は 「 | | 」 で 判定 処理 を 行っ て か ら 定 義 ・ 再 定義 
し ます 。 し か し 、 次 の サン プル の よう な 場合 、Internet Explorer と 他 ブ ラウ ザ で は 定義 され る 関数 が 
異な り ま す 。 


var estFuno: 
Funotion estFuno2 ( ) { 
a1er ( "最初 に 定義 し た 関数 " ) : 
} 
a1er ヒ 上 (testFunC) : 
ifF (!EtestFunc) 【 
Funotion estFunoc ( ) { 
a1er ( " 二 番 目 に 定義 し た 関数 " ) : 
} 
})e1set 
Funotion estFuno ( ) { 
a1er ( " 三 番目 に 定義 し た 関数 " ) : 
} 
} 


testFunoc( ) : 








アテ ぴ STNNHT へ へ 眼 0 - ヨ ldVHO 


Internet Explorer で は スク リプ ト の 処理 に 関係 な く 、 最 後に 「function」 で 記述 され た 関数 が 定義 
され ます 。 他 の ブラ ウザ で は 実際 の スク リプ ト の 処理 に 従っ て 定義 され ます 。 上 記 の サン プル を 実行 
する と Internet Explorer で は 、 次 の 画面 の よう に アラ ー ト ダイ アロ グ に 関数 の 内 容 が 表示 され た 後 
に 「 三 番目 に 定義 し た 関数 ] と 表示 され ます 。 他 の ブラ ウザ で は 「undefined」 と 表示 され た 後に 「 ニ 
番目 に 定義 し た 関数 ] と 表示 され ます 。 この よう な ブラ ウザ に よる 関数 定義 の 違い に は 、 注 意 し て くだ 


さい 。 


function testFunc() て 作 三 番目 に 定義 し た 関数 


alert(" 三 球 目 に 定 養 し た 開 数 "): 
+ 





本 = に 
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SeakeN 呈 上 


特定 の ID を 持つ オブ ジェ クト に 
アク セス する 





OO W 90-d ヨ ld4YHO 















入力 され た 文字 が ペー ジ 
上 の 領域 に 表示 され る 














[a ICOavesorprse ・| っ | xl No 


Oi 


3 る |@mwesoptsamle | | 信 ・ 回 ・ 












書き 込む 内 容 : ] ち 合わ せ に つい て 








N 





伝言 板 








書き 込む 内 容 : 打ち 台 わ せ に つい て 
書き 込む 






IN 















凍 コン ピュ ー タ | 保護 モー ド : 無効 








打ち 合わ せ に つい て 


テキ スト フィ ー ル ド に 文字 を 入力 
し て ボタ ン を クリ ッ ク す る と … ーーーーー ーー ーー ーー 








の 19@ 宮 9@)b) 





還 旧 上 用 馬 誠 了 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 
<meta htp-equi マ = "conten キ -type" conten= "tex 上 /htm1: 
CharSe ヒ =uF-8"> 
< 上 1 上 1e>JavaSorip Samp1e</ 上 1 上 1e> 
<1ink re1="sty1eshee" type="Eex 上 /css" hreF="main.CSS" 
media="a11 "> 
<8C エ 1p type= "上 ex / JaVaSC エ 1D 上 " 8S エ o= "ma1n .S "></ SC エ ュ ロキ > 
</head> 
< く bodY> 
<h1 > 伝言 板 </h1> 
<fForm ac モ 1on=" ./wr1te .Cgi" method= "get" name= "mainForm"> 
書き 込む 内 容 :<1npu ヒ type= "tex 七 " name="w エ 1EeData" ] 丘 
1d= "writeData" Ya1ue=" "> 
<1npu 上 ype= "button" 1d=" SetButton" Ya1ue=" 書き 込む "> 


</ Form> の 





<diy 1d="message"></div> 一 久 
</body> 
</htm1> 


医 読み 出す テキ スト フィ ー ル ド に は 「name」 属 性 と 「id」 属 性 を 指定 する 
話 入力 され た 内 容 を 表示 する <div> タ グ に も ID 名 を 指定 する 


田邊 目 用 用 本 RS 病 半 main.js 


window.on1oad = Funotion( ) { 
documen . getE1emenEByTd ( "setButton" ) .onc1ick = Function ( ) { 
Var ex = document .getE1ementByTd ( "wr1teData" ) .va1ue 一環 
document .getE1emenEByTd ( "message" ) . 1nnerHTMT, = tex: 一 角 
} 
} 


⑨)9Y@ 放 9@ 





頭 |D 名 が 「writeDatal」 の エレ メン ト (「id」 属 性 が 「writeData」 の テキ スト フィ ー ル ド ) の 内 容 を 読み 出す 
話 |D 名 が 「message」 の エレ メン ト (「id」 属 性 が 「messeage」 の <div> タ グ ) に テキ スト フィ ー ル ド の 内 容 を 書き 出す 


⑯ 損 ge 回 上 名 の 取得 は 「getElementByld()」 を 使う 

特定 の ID 名 を 持つ ペー ジ 上 の エレ メン ト に アク セス する に は 、「document.getElementByld()」 を 使 
いま す 。 パラ メー タ に は 、 取 得 し た い エ レ メ ン ト の ID 名 を 指定 し ます 。 「document.getElementByld()」 
の 戻り 値 は エレ メン ト へ の 参照 ( パ ポインタ) に な り ま す 。 後 は エレ メン ト ご と の メソ ッ ド や プロ パテ ィ を 参照 / 
設定 する こと で 各種 処理 を 行う こと が で きま す 。 










Wii テー ブル の ノー ド (tbody) に 注意 

テー ブル タグ は HTML 文 書 上 で は 定義 され て いな く て も 、 内 部 で は 正しい タグ 付け に 変換 され ます 。 た 
と えば 、 次 の サン プル の HTML 文 書 に は <tbody> タ グ は 記述 され て いま せん が 、 内 部 で は <tbody> タ グ が 
追加 され た 文書 構造 と し て 定義 され ます 。 HTML 文 書 で 正しく 定義 、 省 略し な けれ ば よい の で す が 、 こ れ を 
忘れ て し まう と 異な る ノー ド を 参照 し こし まい 、 間 違い の も と に な っ て し まい ます 。 な お 、 ノ ー ド な どの 確認 
は DOM ツ リー 表示 が 可能 な ブラ ウザ で あれ ば 原因 判明 の 糸口 に な る で し ょ う 。 

⑮ HTML ファ イル 
<tab1e 1q=" ヒ 上 ab]1e1" border=" 1 ">< ヒ エ >< モ 上 h>CPU< / 上 >< / 上 エッ > 
こく ヒエ >< ヒ > 双 ら On< / ヒロ >< / ヒエ >< / 上 ab1@e> 


⑯⑮JavaScript フ ァイル 


w1ndow.on1oad = funotion( ) { 
tb1 = qdocument .qetE1ementByTdq ("tab1e1" ) : 
a1er (て tb1 . FirstChi1d . tagName) : 


} 
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SE EDINN | | 議 CHAPTER-06 jez 


特定 の タグ 名 を 持つ 
0 オブ ジェ クト を 制御 する 








ー イ 
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工 
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【 の 
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〇 
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こ で は 、 ペ ー ジ 上 の 「li」 の タグ 名 を 持つ オブ ジェ クト (<li> タ グ ) を 制御 する 方 法 に つい て 解説 し ます 。 



















用 語 解 説 


オブ ジェ クト と は ? 
メソッド と は ? 
プロ バテ ィ と は ? 
イベ ント と は 2 










CSS と は ? 
XSLT と は ? 














商 コン ピュ ー タ | 保護 モー ド : 無効 








オプ ジェ クト と は ? 
メン ッ ド と は ? 





リス ト の 文字 上 に マウ スカ ー ソ ル を 
重ね る と 、 背 景色 が 変化 する (マウ 


ー ソ ル を 離す と 元 に 戻る ) イベ ント と は ? 










CSS と は ? 
XSLT と は ? 








剖 コン ピュ ー タ | 保護 モー ド : 無効 


SeWXeme@ 当 目 上 用 同軸 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 
<me ヒ ta h ヒ 上 上 わ ーGdUu1 マ = "で COn 七 Gn モ 上 pe" ConEen ヒ = "上 ex 七 /htm] : 
CharSe ヒ =uEF-8"> 
< モ ュ E]1e>JavaSc エ ip 上 Samp1e</ ヒ 1 二 上 1e> 
<1ink re1="styleshee" ype="Eex 上 /css" hreF="main.CSS" 
media="a11 "> の 


SC エ ュ 1p 七 上 ye@= "上 上 / る 8 ご エエ p 七 " 5 エ C="ma1n . 8S"></ SC エ ュ p ヒ > 
</head> 
< くわ ody テ > 
<h1 > 用 語 解 説 </h1> 
<u] > 
< ユミ > オブ ジェ クト と は ?</ ユエ > 
< ユエ > メソ ッ ド と は ?</ ユエ > 
<1 ュ > プロ パテ ィ と は ?</1 ユ > 
<1 エ > イベ ント と は ?</ ユ > 
く /u] ユ > 
くい > 
<11>CSS と は ?</ 1 ユ 11> 
<1i>XSLT と は ?</ ユエ > 
< く /u1 テ > 
</body> 
</htm1> 


呈 目 用 用 本 mainjs 


window.on1oad = fFunotion ( ) { 
Var 11iTag = 2 
For (Var +=O: 1<1iTag.1ength: ユ ++) { 

1imag [1] .onmouseover = fFunotion( ) { 暫 


の @)19I@ 事 の @)b 





this . sty1e .backgroundCo1or = "##fFaa": 


} 
1imag [1] .onmouseou = Funotion( ) { 
this . sty1e .backgroundCo1or = 『" 提 EEFF": 


} 


トー 


…<| ッ > タグ だ け 抽 出し 、 そ の 数 だ け 繰り 返す 
…<Ii> タ グ に マウ ス が 重なっ た と き に 背景 色 を 薄 赤 に する よう に する 
…<li> タ グ か ら マ ウス が 離れ た と き に 背景 色 を 白色 ( 元 に 戻す ) に する よう に する 





@ 員 9) 軸 秀 getElementsByTagName()」 を 使っ て タグ 情報 を 取得 する 


特定 の タグ を 取得 する に は 「getElementsByTagName()」 を 使い 、 パ ラメ ー タ に は 取得 し た い タ グ 
名 を 指定 し ます 。 結果 は 配列 と し て 返さ れ 、 そ れ ぞ れ HTML 文 書 内 で の 出現 順に 格納 され ます 。 配列 に 取 
得 し た タグ 情報 が 入っ て いる の で 、 マ ウス イベ ント な ど を 設定 し 、 各 種 処 理 を 行わ むせ する こと が で きま す 。 サ 
ンプ ル で は 、 マ ウス オー バー 時 と マウ ス ア ウト 時 に <li> タ グ の 背景 色 を 変え る よう に し て いま す 。 サン プル 
で の 「this」 は <li> タ グ 自 身 を 示す た め 、「this.style.DackgroundColorl と する と 、 マ ウス イベ ント が 発生 
し た <li> タ グ を 示す こと に な り ま す 。 
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eakeN 間 昌 | し 」cHAreoey| oze 











特定 の 名 前 を 持つ オブ ジェ クト を 
0 アス 制御 する 











こ で は 、 ペ ー ジ 上 で 「osType」 と いう 名 前 を 持つ オブ ジェ クト の 情報 を 取得 する 方 法 に つい て 解説 し ます 。 















































」 
Ed] 
〇 
= 
ぁ コ 
で 
ーー 
「TT 
2 
【】 | ーー | 
上 ひ | 語 請 語 = ニ に ニョ | | 
| | Oo comesow ss | |xleesera ぁ 
ロ = テー ニー ーーーーーーーーー ユ 
p 交信 |@mesawksempe | | 信 ・ 還 - 電 ・ 
ー 商 ロン ピュ ユー タ | 保護 モー ド : 無効 き 
ーーb ビ リピ cn 利用 レ し て いい る OS の 調査 
ラジ オ ボ タ ン を ON に し て [選択 ] 
ボタ ン を クリ ッ ク す る と … @⑥ MacOS 
@ Windows 
選択 され た 項目 が 表示 され る Windows が 選択 され て いま す 。 
3 靖 コン ピュ ー タ | 保護 モー ド : 無効 明 10096 < il 


eg 事 9@ 当 上 朋 朋 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 TransiEtiona1 / /EN"> 
<htm1> 
<head> 
<meta htp-equ1 マ = "ConEen-Eype" Conten キ = "ex /htm] : 
Charse ヒ =utF-8"> 
< モ ュ 上]e>JavaScrip ヒ Samp]e</ モ 1 上 1e> 
<1ink re]="sty1esheet" type="EexE/css" hrefF="ma1im.CSS" 
media="a11 "> 
<SCr1pt ype="Eexxt / JaVaSC エ 1p ヒ " 8 エ o="main .S"></ SC エ 1D ヒ > 
</head> の 





66 | 


<body テ > 
<h1> 利 用 し て いる OS の 調査 </h1> 
<Form action=" ./cheok .Cg1" method= "get" 
1d= "mainForm" name="mainForm"> 
<1npu 七 type="radio" name="osType" va1ue="MacOS X" 
cheocked>MaCOS ヌメ < わ エ > 3 
<1npu type="radio" name="osType" ゞ a1ue= "1nux "> エ ユ mu くわ エッ > 
<1npu 七 type="radio" name="osType" Ya1ue= "Windows ">W1ndowS<D エ > 
<1npu type="buEon" 1d="oheokButton" Ya1ue=" 選 択 "> 
< く / Form> 
<d1Vy 1d="resu1 上 "> 結果 :</d ュ iY> 
</body> 
</htm1> 


の 


を 


台 ラジ オ ボ タ ン に は 「name」 属 性 を 指定 し て 同じ 名 前 (グル ー プ 名 ) に する 


) 当 目 用 用 本 WE 瑞 商 あゆ mainjs 


window.on1oad = Function( ) { 
document . getE1ementByTd ( "checkButEton" ) .onc1ick = Function( ) { 
yar radio = qocument .getE1ementsByName ( "osType" ) : 一 名 
For (var 1=0: <radio.1ength: ュ ++) { 一 話 





if (radio[i] .checked) 【 
document .getE1ementByTd ("resu1" ) .1nnerHTMTL, = を 
ェ adio [1] .value+ "が 選択 され て いま す 。 " : * プ 


+ー 


…「name」 属 性 が 「osType」 の タグ を 抽出 する 

… ラ ジオ ボタ ン の 数 だ け 繰り 返す 

… ラ ジオ ボタ ン が チェ ッ ク さ れ て いる か どう か 「chekced」 プ ロ パ ティ を 調べ 、 チ ェ ッ ク さ れ て いた ら ペ ー ジ 上 に 選択 項 
を 表示 する 

















(@⑯ 頂 3) 還 上 doOCument.getElementsByName()」 を 使っ て タグ 情報 を 取得 する 


「name」 属 性 で 指定 され た 名 前 を 取得 する に は 、「document.getElementsByName()」 を 使い ます 。 
これ は 主 に 入力 フォ ー ム の ラジ オ ボ タ ン へ アク セス する た め に 利用 し ます 。 ラジ オ ボ タ ン は 同じ 「name」 
属性 を 持つ グル ー プ と し て 定義 され ます 。 「document.getElementsByName()」 を 使え ば 、 指 定 さ れ 
た 名 前 を 持つ タグ の 情報 を 配列 と し て 返し ます 。 

サン プル で は 「osType」 と いう 名 前 を 持つ タグ (ラジ オ ボ タ ン ) を 取得 し 、 選 択 さ れ て いる か どう か を 
「checked] プ ロ パ ティ を 使っ て 調べ て いま す 。 「checked] プ ロ パ ティ が 「true」 で あれ ば ON、「false」 で 
あれ ば OFF に な っ て いる こと に な り ま す 。 
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sEcTioh 回 議 


特定 の クラ ス 名 を 持つ 
0 ア ツ オブ ジェ クト を 制御 する 
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ここ で は 、prototype.jS ラ イブ ラリ を 使っ て 、「note」 と いう クラ ス 名 を 持つ オブ ジェ クト の 枠 線 を 変更 する 方 
法 に つい て 解説 し ます 。 














ポタ ン を ウリ ッ ク す る と 、 note ク ラス だ け 枠 が 太く な り ま す 。 











note ク ラス だ け 枠 を 太く する N 


ここ は aote ク ラス 





ここ は caumon ク ラス 






ここ は mote と cauton ウ ラス 


Oo coseoo ss - | | > eera 5 
ここ も note ク ラス 補 | 張 Jasptsampe | | 食 ・ 還 = 2 


ここ は cauton ク ラス 





ボタ ン を クリ ッ ク す る と 、 note ク ラス だ け 提 が 大 く な り ま す 。 











剖 コン ピュ ー タ 上 保護 モー ド : 無効 note ク ラス だ け 掛 を 太く する 


ボタ ン を クリ ッ ク す る と … 
ここ は mote ク ラス 


ここ は cauton ク ラス 


スタ イル シー トク ラス が 「note」 
の ボッ クス だ け 、 枠 が 太く な る 


ここ は note と cauton ク ラス 


ここ も note ク ラス 


ここ は cauthon ク ラス 














剖 コン ピュ ー タ | 保護 モー ド : 無効 - 東 100% < 


SeWeee 可 当 目 用 用 馬 因 了 index.htm 


<!DOCTYPE htm]1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 
<meta h ヒ ヒー-@Gdu1 マ = "で COn ヒ 上 @ ら mn ヒモ pe" ご ConEen ヒ =" ヒ ex 上 /htm1] : 
CharSeG ヒ =uF-8"> 
< ヒュ 1 上 1e>JaVaSC エ 1p 七 Samp1e</ ヒ 1 上 1e> 
<1ink re1="styleshee" type="Eex 七 /css" hreF="main.CSS" 
media="a11 "> の 


<SC エ 1D 上 上 ye= "上 @x ヒ / る マ aSC エ ュ 1D ヒ " S エ C= "poOEoEyDe . 8 "></ SC エ 1p ヒ > 
<8C エ 1p 上 上 ype= "Ex 七 / る VaSC エ ュ 1D ヒ "8 エ o= "ma1n . 8 "></ SC エエ D ヒ > 
</heaqd> 
< くわ ody> 
ボタ ン を クリ ッ ク す る と 、note ク ラス だ け 枠 が 太く な り ま す 。 
<Form acC ヒ 1on=" ./accesSS .Cg1" method="get 上 " = ヽ 
1d= "mainForm" name="ma1nForm"> デ 
<1npu type="button" 1d="seButton" Ya1ue= "notEe ク ラス だ け 枠 を 太く する "> 
く / Form> 
<diVy c1ass="note "> ここ は note ク ラス < /d1 マ > 
<diy c1ass= "ocau1on "> ここ は caution ク ラス < /d ュ マ > 
<divy c1ass="note caution "> ここ は note と Cau 上 1on ク ラス < /d1Y> 
<Qiy c1ass= "note "> ここ も note ク ラス < /d1 マ > 
<diy cl1ass="oaut1on "> ここ は caution ク ラス < /d1 マ > 
</body> 
</html> 


ReWXasgej 当 目 用 用 本 WS 本 交 多 main.js 


window.on1oad = funoction ( ) { 
document . getE1emenEtByTd ( "setButton" ) .onc1iock = Funotion( ) { 
$$(" .note" ) .each (Function (ob] ) { 一 名 
ob] . sty1e .borderWidth = "4px": 一 話 
用 





副 「$$(〈」 を 使っ て スタ イル シー トク ラス 名 が 「note」 の エレ メン ト だ け を 取得 し 、 処 理 を 行う 
話 スタ イル シー ト の 枠 の 幅 を 4 ピク セル に 設定 する 


(@ 損 9】 映 個 特定 の クラ ス 名 の 取得 に は 「$$()」 を 使う 


prototype.jS ver 1.5 以 降 で は 、 特 定 の スタ イル シー トク ラス 名 を 持つ エレ メン ト だ け を 取得 する こと 
が で きま す 。 た と えば 、「$$(".note"') と する と 、 ス タイ ル シ ー ト の 「note」 ク ラス が 適用 され て いる エレ メ 
ント だ け を 取得 する こと が で きま す 。 取得 し た エレ メン ト に 対し て 処理 を 行い ます が 、prototype.jS で は 
「for()」 で は な く 、「each(O」 を 使っ て 繰り 返し 処理 を 行う こと が で きま す ( イ テレ ー タ ) 。 「each()」 を 使う 
こと で 繰り 返し に 必要 は 変数 や 繰り 返し 回 数 な ど を 記述 する 必要 が な く な り 、 記 述 ミ ス に よる 不具 合 が 減 





少し ます 。 

「each)」 で 繰り 返す 際 に 呼び 出す 関数 に は 、「$$()」 で 取得 し た エレ メン ト へ の 参照 が パラ メー タ と し 
て 渡さ れ ま す 。 サン プル で は 渡さ れ た エレ メン ト の スタ イル シー ト を 操作 する こと で 枠 の 太 さ を 変更 し て 
いま す 。 














AO W 90 - ヨ ldVHO 









SsECTION | 中 議 
特定 の 階層 





CHAPTER-06p| ogo 
層 構 造 を 持つ 


オブ ジェ クト を 制御 する 
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ここ で は 、prototype.jS ラ イブ ラリ を 使っ て 、<div> タ グ と <span> タ グ の 階層 構造 を 持つ オブ ジェ クト の 文 


字 色 を 変更 する 方 法 に つい て 解説 し ます 。 








ボタ ン を クウ リッ ク す る と 、w と span の 階層 だ け 文字 が 赤く な り ま す 。 


ここ は dw のみ 











dy と span の 階層 
dv と span の 階層 ここ は dy 


ここ は dv で ここ は dy と span の 階層 





ここ は p と span 








、。 。 画 コ ンピュータ | 保護 モー ド : 





ボタ ン を クリ ッ ク す る と 、<div><Span> 
タグ の 階層 に な っ て いる 部 分 の 文字 色 
が 赤色 に な る 


Re)WXe@e り 当 目 上 | index.htm 


<!DOCTYPE htm1] PUBLTC 
<htm] > 
<head> 


<mea h ヒ tp-equ1Y= "oonEen-Etype" 


Cha エ SG キ =u モ 上 F-8"> 















ボタ ン を クウ リッ ク す る と 、 wiy と span の 階層 だ け 文字 が 赤く な り ま す 。 














[ dv span 障 層 だ け 文 字 色 を 赤色 に する R 軸 










ここ は の み 






dv と span の 階層 






dv と span の 階層 ここ は dy 


ここ は dy で ここ は dw と span の 階 選 










ここ は p と span 





二 コン ピュ ー タ | 保護 モー ド : 無効 。 





リー/ /W3C/ /DTD HTML, 4.01 Trans1tiona1 / /EN"> 


ConEen ヒ = "E 上 ex 上 /htm] : 


< モ ュ 1 上]e>JavaSo エ ip 上 Samp1e</ ヒ ュ 1 上 1e> 
<1ink re]="sty1eshee 上 " type="Eex 七 /css" hreF="main.CSS" 


media="a11 "> 


<8Cr1pt type="Eex / JaVaSC エ 1D ヒ " SC= "や と Ootype . ]S "></ SC エ 1D セ > 
<8C エ 1D 上 上 ype=" ヒ ex / JaVaSC エ 1D" SrC="matinm .]S"></ SC エ 1p セ > 


</head> 
<body> 


ボタ ン を クリ ッ ク す る と 、dQiv と span の 階層 だ け 文 字 が 赤く な り ま す 。 


<fForm action=" ./access . Cd1" 


1d= "mainForm" name= "matnForm"> 


method= "de ヒ " 














くう <1npu ヒ 上 ype= "bu ヒ ton" 1d=" SeEButon" = 

Ya1ue="qdiy span 階 層 だ け 文 字 色 を 赤色 に する "> 

< く / Fo エ m> 

<d1iV 1d="oonEens"> 
<qdiv cl1ass="note"> こ こ は di ヾ のみ < /d ュ > 
<div c1ass= "mote"><span>div と span の 階層 </ span>< /d1 マ > 
<div oc1ass= "mote"><span>div と span の 階層 </ span> こ こ は d ュ </ ュ > 
<diy oc1ass="note "> ここ は di で で <span> こ こ は d ュ と span の 階層 </ span></d1 マ > 
<p cl1asgs= "note"><span> こ こ は p と span< / SDan></p> 


</d1 マ > 
</body> 
</htm1] > 
Se)WXqg9e7 り 当 目 用 目 main.js 





window .on1oad = fFunotion ( ) { 
document . getE1emenEBy エ Td ( "set 上 Buton" ) .onc1ick = Funotion( ) 【 
お ("contents" ) .getE1ementsBySelector =- 
("div span" ) .each (Funoction (ob] ) { に 
ob] . sty1e.co1or = "red" 一峰 
} ) : 


} 


頭 「getElementsBySelector()」 を 使っ て 階層 構造 を 指定 し 、 該 当 す る セレ クタ だ け を 「each()」 で 繰り 返す 
許 スタ イル シー ト の 「color」 プ ロ パ ティ に 「red」 を 指定 する (文字 色 が 赤 に な る ) 





@7i 抽 g】 回 個 特 定 の 階層 構造 の 取得 に は 「getElementsBySelector()」 を 使う 


prototype.js ver 1.5 以 降 で は 、 特 定 の 階層 構造 を 持つ エレ メン ト だ け を 取得 する こと が で きま す 。 
「getElementsBySelector("div span')」 と する と 、 子 孫 セ レク タ の 指定 に な り ま す 。 この セレ クタ の 指 
定 は 、 ス タイ ル シ ー ト の 定義 の 際 に 指定 で きる セレ クタ が 利用 で きま す 。 

「getElementsBySelector("div span")」 で 取得 し た エレ メン ト に 対し て 処理 を 行い ます が 、 
prototype.jS で は 「for()」 で は な く 、「each()」 を 使っ て 繰り 返し 処理 を 行う こと が で きま す ( イ テレ ー タ ) 。 
「each()」 を 使う こと で 繰り 返し に 必要 は 変数 や 繰り 返し 回 数 な ど を 記述 する 必要 が な く な り 、 記 述 ミ ス に 
よる 不具 合 が 減少 し ます 。 

「each()」 で 繰り 返す 際 に 呼び 出す 関数 に は 、「getElementsBySelector()」 で 取得 し た エレ メン ト へ 
の 参照 が パラ メー タ と し て 渡さ れ ま す 。 サン プル で は 、 渡 され た エレ メン ト の スタ イル シー ト を 操作 する こ 
と で 文字 を 赤色 に 変更 し て いま す 。 














[Wiil 骨 Query で も 特定 の 階層 構造 を 取得 する こと が で きる 


jQuery で も 階層 構造 を 指定 し て エレ メン ト を 取得 する こと が で きま す 。jQuery の 場合 、prototype.jS 
と 異な り 、「$()」 を 使い ます 。 「$("div span')」 の よう に 指定 し ます 。 jQuery で は CSS Level 3 で 指定 す 


る こと が で きる セレ クタ に も 対応 し て いま す 。 
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SEKEuHKGDINI 昌 CHAPTER-06 と | loan 


人 @】s 信 園 ペー ジ に テキ スト を 出力 する 





OH 上 90- ヨ 1dYHO 








ここ で は 、 テ キス ト フ ィ ー ル ド に 入力 し た 文字 を 、 ペ ー ジ 上 に テキ スト と し て 出力 する 方 法 に つい て 解説 し ます 。 








ェ [coosowrss ・| ヶ | X Lve search 


2 9 sorpt sampe | | 訪 ・ 団 ~ ーー 



















メッ セー ジ ボ ー 





書き 込む 内 容 : <p> タ グ に つい て 
込む 



















部 コン ピュ ユー タ | 保護 モー ド : 無効 








テキ スト フィ ー ル ド に 文字 を 入力 
















し て ボタ ン を クリ ッ ク す る と … メッ セー ジ ボ ー ド 
書き 込む 内 容 : <pP> タ グ に つい て 
入力 され た 内 容 が その まま 







ヴ に つい て 
ペー ジ 上 に 表示 され る co 








画 コン ピュ ー タ | 保護 モー ド : 無効 


ReWXW 事 9 且 朋 用 目 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 
<htm1] > 
<head> 

<meta htp-eqdu1 マ = "Conten ヒ -t 上 ypDe" ConEen ヒ = "上 ex 七 /htm] : 

CharSeG ヒ =u 上 F-8"> 

< モ ヒ ュ 上 1e>JaVaSoCr1p 上 Samp1e</ ヒ 上 1e> 

<1ink re]="sty1leshee 上 " type="Eex 上 /oss" hrefF="main.CS8" 

media="a11 "> 

く 8C エ 1p 上 上 ypDe= "ex 七 / る VaSC エ 1D 上 " S エ = "ma1n . 8 "></ SC エ 1p キ > 


</head> の 


<bod ア > 
<h1> メ ッ セ ー ジ ボー ド </h1> 
<Form ac 上 ion=" . /wWr1Ee . Cgd1" method= "ge 上 " name="mainForm"> 
書き 込む 内 容 :<1npu ype="Eex モ " name="wr1iteData" 
ュ 1d= "writeData" ヾ a1ue=" "> 
<1npu ヒ 上 ype= "bu ヒ EEon" 1d=" se 上 BuEon" Ya1ue=" 書き 込む "> 
</ Form> 


<d1V 1d="messade "></d ュ マ > 
</body> 
</htm1> 





eeee 当 目 用 用 本 本 前 main.js 


window.on1oad = funotion ( ) { 
document . getE1emenEtByTq ("setButton" ) .onc1iock = funotion( ) { 
Var ex = document .gqetE] ementByTd ( "writeData" ) .va1ue: 一 名 
document . getE1ementByTdq ( "message" ) . 1nnerTex 二 = ex: 一 凡 
document . getE1emenEByTq ( "message" ) .textConen = ex: 一 話 
} 


+ー 


… テ キス ト フ ィ ー ル ド の 内 容 を 読み 出す 
…Firefox 以 外 の ブラ ウザ で は innerText プ ロ パ ティ に 表示 する 文字 列 を 指定 する 
・Firefox で は textContent プ ロ パ ティ に 表示 する 文字 列 を 指定 する 





@7 誠 9】 遇 上位 ペ ー ジ 上 に ブレーン な テキ スト を 表示 する に は 「textContent」 ま た は 「innerText」 を 使う 


ペー ジ 上 に プレ ー ン な テキ スト を 表示 する に は 、「textContent] プ ロ パ ティ また は 「innerText]」 プ ロ パ 
ティ に 書き 込み ます 。 Firefox で は 「innerText]」 プ ロ パ ティ が な いた め 、「textContent] プ ロ パ ティ に 書き 
込み 必要 が あり ます 。 Firefox 以 外 の ブラ ウザ で は 「innerText] プ ロ パ ティ に 表示 し た い 文 字 列 を 指定 し 
ます 。 プレ ー ン な テキ スト と し て 処理 され る た め 、 文 字 列 内 に HTML タ グ が ある 場合 で も タグ は 反映 され 
ず 、 そ の まま の 文字 が 表示 され ます 。 


(WIWiillW 多 言語 の 表示 


HTML 文 書 で は 、 英 語 や 日 本 語 以 外 に 多く の 言語 に 対応 で きる よう に な っ て いま す 。 UTF-8 で あれ ば 、 
他 の 国 の 文字 も 混在 し て 文章 に 表示 させ る こと が で きま す 。 JavaScript か ら で も 次 の よう に し て ペー ジ 
内 に 他 の 国 の 文字 を 表示 させ る こと が で きま す 。 な お 、 下記 は ハン グル 、 中 国語 、 ア ラビ ア 文 字 の 3 文字 を 
ペー ジ 上 に 表示 する 記述 で す 。 


Var ex ヒ = "& 提 12593:"+ "gg#63906:"+"&#64336:『": 
documen . getE] ementByTdq ( "message" ) . 1nnerHTMT, = 上 ex: 
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EGR 中 [| 」CHAPrERo6 と | jogz 


ペー ジ に HTML デ ー タ を 
出力 する 

































書き 込む 内 容 : <strong> 赤 <strong> は 



















環 コン ピュ ー タ | 保護 モー ド : 






テキ スト フィ ー ル ド に 文字 を 入力 
し て ボタ ン を クリ ッ ク す る と … ii 
書き 込む 内 容 : <strong> 赤 </strong> は 


きく 


[G 















HTML タ グ が 反映 され た 状態 で 入力 
され た 内 容 が ペー ジ 上 に 表示 され る 







赤 は 








末 コン ピュ ー タ | 保護 モー ド : 無効 





@ り 当 目 用 目 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 

<me ヒ ta h ヒ tp- equ1 マ = "Conen ヒ -type" conEen ヒ =" モ ex /htm] : 

CharSe ヒ =uF-8"> 

< ヒュ ヒ ]e>JaVaSorip ヒ Samp]e</ 上 ュ ヒ 1e> 

<1ink re1="styleshee" type="tex 上 /css" href="main .Css" 

media="a11 "> の 


いのら)9INe 王 @ 


く SC エ 1D ヒ 上 ye= "上 @ 七 / a マ aSC エ 1 エ D 七 " SC= "ma1n . 8 "></ SC エ ュ ユヒ > 
</head> 


<body テ > 
<h1>HTMT, タ グ の 確認 </h1> 
<fForm action=" . /wriEe .Cg1" method= "gde モ " name="matinForm"> 
書き 込む 内 容 :<1nput type=" モ ex モ " name="writeData" *。 
ュ 1d= "writeData" Ya1ue=" "> 一 
<1npu 上 ype= "buEton" 1d="SeButEon" Ya1ue=" 書き 込む "> 
</ Form> 
<d ュ 1 1d="meSssade "></d ュ > 
</ body> 
</htm1 > 





Rese ヨ 当 目 用 旧 本 WE 瑞 和 mainjs 


window.on1oad = function ( ) { 
document . getE]emenEByTqQ ( " setBuEon" ) .onc1ick = Function( ) {【 
var ex = qocument . getE1ementByTdqd ( "writeData" ) .va1ue : 一 騙 
document . getE1ementByTd ( "message" ) . 1nnerHTMT, = ex: 一 臣 
} 


本 テキ スト フィ ー ル ド の 内 容 を 読み 出す 
許 innerHTML」 プ ロ パ ティ に 表示 する 文字 列 を 指定 する 

















(@7ig】 遇 上 HTM し タグ を 反映 させ て 表示 し た い 場 合 は 「innerHTML」 ブ プロ パテ ィ を 使っ て 表示 する 


ペー ジ 上 に HTML タ グ も 反映 させ て 表示 させ た い 場 合 に は 、「innerHTML」 プ ロ パ ティ に 表示 する 文字 
お よび HTML タ グ を 書き 込み ます 。 「innerHTML」 プ ロ パ ティ に HTML タ グ を 含む デー タ を 書き 込む と 、 
ほとん どの タグ は 正しく 反映 され ます 。 た だ し 、 入 力 フォ ー ム な ど 一 部 の タグ に 関し て は 設定 し た 属性 な ど 
が 反映 され な いこ と が あり ます 。 また 、 書 き 込む タグ が 閉じ られ て いな い 場 合 に は 強制 的 に 閉じ タグ が 付加 
され ます 。 

「innerHTML」 プ ロ パ ティ へ の 書き 込み 処理 は 低速 な た め 、 変 数 な ど に 入れ て お き 最 後に 一 括 し て 書き 
込む よう に し ます 。 











(@'3[iil 明 Internet Explorer で の 文字 列 の 連結 に つい て 


Internet Explorer で は 「innerHTML」 プ ロ パ ティ に 書き 込む 文字 列 を 「+」 記 号 で 連結 する より も 、 連 結 
する 文字 列 を 配列 に 格納 し 、 最 後に 「join()」 で 連結 し た 後に 書き 込む 方 が 高速 に 処理 され ます (282 ペ ー 


ジ 参 照 ) 。 
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照 / 設 定 す る 
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叶 ボタ ン を クウ リック する と 、 ノー ド の 値 を 大 B 設 定 し ます 





farming route 


各 ノ ー ド の 値 を 奏 照 設定 










ここ は テキ スト ノー ド I で す 





















ロン ピュ ユー タ | 保護 モー ド : 無効 
ーーーーー- ーーーーーー ーーーーーーー ボタ ン を ウリ ッ ク す る と 、 ノ ー ド の 値 を 奏 昭 投 定 し ます 







ボタ ン を クリ ッ ク す る と … 






農道 


書き 換え まし た 








ブー ド の 値 が 参照 設定 され る farmmg route 


ここ は テキ スト ノー ド で す 









末 コン ピュ ー タ | 保護 モー ド : 無効 








Seemee 可 当 目 用 用 馬 同 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1> 
<head> 
<meta h ヒ tp-eqdu1 マ = "Conten ヒ -t 上 ype" ConEen ヒ ="Eex 七 /htm] : 
Cha エ SeG ヒ =uF-8 "> 
< ヒュ 1 上 1e>JaYaSCr1p 七 Samp1e</ ヒ 1 二 上 1e> 
<1ink re]="sty1Tesheet" ype="ex 上 /oss" hrefF="main.css" 
med1ia="a11 "> ( の 


く 8Cr1p 上 ype= "上 ex 上 / ] る VaSC エ 1D ヒ "8S エ oC= "ma1m . 8 "></ SC エ 1D ヒ > 


</head> 
<bodY> 
ボタ ン を クリ ッ ク す る と 、 ノ ー ド の 値 を 参照 / 設 定 し ます 
<fForm action=" ./cheoknode . Cg1" method= "ge 上 " name= "matnForm"> 


<1npu ヒ 上 ype=" モ ex 上 " name="FNode" 1d="FNode" 
Ya1ue= "Farmind rou モ 上 e"> 
<1npu 二 type="bu 上 ton" 1d="SetButton" Ya1ue=" 各 ノー ド の 値 を 参照 / 設 定 "> 
</fForm> 
<d1iY 1d="QNode "> ここ は テキ スト ノー ド で す </d ュ マッ > 一軍 
<d1Y 1d=" エ eSu1 上 "></d1 マ > 
</body> 
</htm1] > 


豆 操作 する ノー ド に ID 名 (fNode) を 指定 する 





Seamwe 当 目 上 用 | 本 ER 二 衣 輝 main.js 


window.on1oad = Function( ) { 

document . getE1emen モ By エ Td ( " setButton" ) .onc1ick = Funotion ( ) { 
Yar ex 上 = document .gqetE1ementByTd ( " ENode" ) .Va1ue: 
document . getE1ementByTdq ( "resu] 上 " ) .1nnerHTMTL, += 上 Gx 上 +"<D エ >": 
text = document .gqetE1emenEtBy エ Td ( "dNode" ) . EirstChi1d .nodeVa1ue : 一 台 
documen . getE1ementByTqd ( "resu] 上 " ) .1nnerHTMT, += 上 ex 上 +"< わ エ >": 
document . getE1emenEtByTd ( "ENode" ) .Yalue = "農道 ": 
document . getE1ementByTq ( "QNode" ) .FirstChi1d.nodeValue = = 
"書き 換え まし た " : ノ 眉 


頭 |D 名 が 「dNode」 の 最初 の ノー ド 値 を 読み 出す (表示 され て いる 文字 列 が 読み 出さ れる ) 
話 |D 名 が 「dNode」 の 最初 の ノー ド 値 を 書き 換え る 


(@ 抽 5 映 租 ノー ド の 値 は nodeValue」 で 参照 や 設定 を 行う 


ノー ド の 値 は 、「nodeValue」 を 使っ て 参照 / 設 定 す る こと が で きま す 。 ノー ド の 指定 は 、 基 準 と な る 位置 
を ID 名 で 指定 し て お く と 便利 で す 。 ド キュ メン トル ー ト か ら た どる より も 、 操 作 対象 と な る ノー ド ま た は 親 
ノー ド に ID 名 を 指定 し て お く と 楽に な り ま す 。 また 、 遠 く の ノ ー ド か ら た どる より も 近く の ノー ド か ら た どる 
方 が ブラ ウザ に よる ノー ド 処 理 の 違い に 悩ま され な く て 済み ます 。 

ノー ド の 位置 指定 は 、「childNodes 昌 」「firstChild」「lastChild]」 な ど を 利用 し ます 。 タグ も 表示 され て 


いる テキ スト や 改行 も ノー ド に な り ま す が 、Internet Explorer で は タグ 間 に あ る 空白 や タブ 、 改 行 は テキ 
スト ノー ド と し て 処 理 さ れず 存在 し な いこ と に な り ま す 。 これ に 対し て Firefox や Safari、Opera な ど で は テ 
キス トノ ー ド と し て 処理 され る た め 、 ノ ー ド を 単純 に た どっ て いく と 異な る ノー ド を 参照 し こし まう こと が あ 
る の で 注意 し て くだ さい 
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Seskes 有 有 
W」2 有 ノー ド の 種類 を 読み 出す 




















ここ は テキ スト ノ ゴ ド で す 





コン ピュ ー タ | 保護 モー ド : 無効 


ボタ ン を クリ ッ ク す る と … 


上 | ここ は テキ スト ノー ド で す 


一 連 の ノー ド の 種類 が 
表示 され る 5 





| |IcHAprER06bl og4 





| 凍 コン ピュ ー タ | 保護 モー ド : 無効 


9IX@i 


@e 当 目 用 用 馬 大 際 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 
<meta htp-equ1Y= "ConEen ヒ -Eype" Conen ヒ =" ヒ ex 上 /htm] : 
で harSe ヒ =utF-8"> 
< ヒュ 1 上 1e>JaVaSC て ip 上 Samp1e</ 七 1 上 1e> 
<1ink re]="styleshee ヒ " ype=" ヒ ex 七 /css" hreF= "main .CS8" 
media="a11 "> 6 
< く 8C エ 1D ypDe= "ex / aVaSC エ 1D ヒ "SC= "ma1in .]S "></ SC エ 1Dp キ > 
</head> 


の 


< くわ od ツテ 
ノー ド の 種類 を 数 値 で 表示 し ます 


<Form aotion=" ./cheoknode . Cg1" method="ge" name= "ma1nForm"> 
<1inpu 上 ype= "bu 上 ton" 1d= "setBu ヒ ton" Ya1ue= "ノー ド の 種類 を 表示 "> 
</ Form> 


<d ュ Y 1d= "Node "> ここ は < !-- コメ ント --><span> テ キス トノ ー ド </ span> で す </d1 マ > 
<d1 1d=" エ GSu1 上 "></1 マ > 


< く /Dbody> 
</html > 
ReiWXa 事 we 直上 朋 用 目 main.js 





window .on1oad = Funotion ( ) { 
document . getE]1ementByTq ( " set 上 Button" ) .onc1ick = Funotion ( ) { 
var @Q = document .getE1ementByTd ( "dNode" ) : 一 名 
Var res = Qoocumen .getE1ementByTd ("resu1 七 " ) : 
For (Va 1=0: 1<3: ユエ ++) { 一峰 
yar nType = d.chi1qNodes [1] .nodeType: 一 回 
reS . 1nnerHTMT, += nType +"<D エ >": 


豆 基準 と な る ノー ド (ID 名 「dNode」) を 取得 する 
許 "3 つの ノー ド 分 繰り 返す 
話 ノー ド の 種類 を 取得 する 


(@⑯ 抽 2 人 還 衣 ノー ド の 種類 は 「nodeType」 で 取得 する 


ノー ド の 種類 は 「nodeType」 を 使っ て 取得 する こと が で きま す 。 「nodeType」 は 、 下 表 の 値 を 返し ます 。 
た だ し 、Safari の で は コメ ント ノー ド は 取得 する こと が で きま せん 。 


nodeType 値 名 称 
1 ELEMENT_NODE 





エレ メン トノ ー ド 








ATTRIBUTE_NODE 


属性 ノー ド 








TEXT_NODE 


テキ スト ノー ド 





CDATA_SECTION_NODE 


CDATA セ クシ ョ ン ノ ー ド 





ENTITY_REFERENCE_NODE 


エン ティ ティ リフ ァ レ ンス 





ENTITY_NODE 








PROCESSING_INSTRUCTION_NODE 


処理 命令 





COMMENT_NODE 


コメ ント ノー ド 





2 
3 
4 
5 
6 
7 
8 
9 


DOCUMENT_NODE 


ドキ ュ メ ント ノー ド 





DOCUMENT_TYPE_NODE 


ドキ ュ メ ント タイ プ 





DOCUMENT_FRAGMENT_NODE 


ドキ ュ メ ント フラ グ メ ント 





NOTATION_NODE 


記法 








AO 中 90-4 コ IayH つ 








SE で LN 旨 CHAPTER-06 085 


2 記 ノード の タグ 名 を 読み 出す 





ここ で は 、 ノ ー ド の タグ 名 を 取得 する 方 法 に つい て 解説 し ます 。 









Live Search の 


| 劉 ・ 回 ・ 殺 ・ 








関 (の ぐ EGOEEE 
きる | | 
ポタ ン を クリック する と 、 ノ ー ド の タグ 名 を 表示 し ます 


ぶ 


ここ は テキ スト ノー ド で す 














3 


痛 JavaScript Sample 














AO WW 90-d ヨ 14VHO 


ボタ ン を ウリ ッ ク す る と 、 ノー ド の タグ 名 を 表示 し ます 















上 コン ピュ ー タ | 保護 モー ド : 無効 


ノー ド の タグ 名 を 表示 ト 


ここ は テキ スト ノー ド で す 


undefined 
W 


ボタ ン を クリ ッ ク す る と 、 一 連 の 


ノー ド の タグ 名 が 表示 され る な 








曽 コン ピュ ー タ | 保護 モー ド : 無効 





Eee 事 9@g 当 目 用 上 上 index.htm 





<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 

<meta hh 上 上 わり -Gqu1=" Con 上 en ヒ -t 上 ype" Conten ヒ = "ex 上 /htm] : 

Cha エ SeG キ =u 上 F-8"> 

< ヒュ 1 上 1e>JavaSCr1p ヒ Samp1e</ ヒ 1 上 1e> 

<1injk re]="styleshee" type="Eex 七 /css" href="main.CSS" 

media="a11 "> 

<8SC1p 上 yDpe= "上 ex / ]aVaSC エ 1p 上 " S エ C= "ma1m . 8 "></ SC エ 1D ヒ > 


</head> の 


2 





<body テ > 
ボタ ン を クリ ッ ク す る と 、 ノ ー ド の タグ 名 を 表示 し ます 


<fEorm ac1on=" ./checknode . Cg1" method="ge 上 " name= "matnEForm"> 
<1npu ヒ type="button" 1d="seEBuEton" va1ue=" ノ ー ド の タグ 名 を 表示 "> 
</ Form> 
<d1V 1d= "QNode "> ここ は <!-- コメ ント --><span> テ キス トノ ー ド </ span> で す < /d1v> 
< く d1V 1d=" エ eSu1 上 "></d1 マ > 
</body> 
</htm1> 


DE | 目 還 main.jS 


window.on1oad = Funotion( ) { 
document . getE1] ementByTq ( " SetButEon" ) .onc1iock = Function ( ) { 
var d = document . getE1ementByTd ( "dNode" ) : 一 馴 
Var re = documen .getE1ementByTdq ( "resu1" ) : 
For (Var =0: 1<3: ュ ++) {一 話 
Yar nType = d.chi1qNodes [1] . tagName : 一 話 
reS . 1nnerHTMI, += nTyDe +"<b エ >": 





} 


豆 基準 と な る ノー ド (ID 名 「dNode」) を 取得 する 
話 3 つの ノー ド 分 繰り 返す 
話 | ノー ド の タグ 名 を 取得 する 


(@ 可 3 提 中 旧 タグ 名 は 「tagName」 で 取得 す 


ノー ド が タグ の 場合 Pe 介する こと が で きま す 。 た と えば 、 テ キス トノ ー 
ド な ど 、 ノ ー ド が タグ で な い ) 場 合 に は 、「tagName」 プ ロ パ ティ は 「undefined] と な り ま す 。 サン プル を 実行 
する と 、 ブ ラウ ザ ご と に 結果 が 異な り ます (下図 参照 )。 テキ スト ノー ド の 場合 は 同じ で す が 、Safari の で は コメ 
ント が 無視 され 、IE7 で は 「!」 を 返し て し まい ます 。 この よう な ブラ ウザ の 違い に は 注意 が 必要 で す 。 

また 、 タ グ 名 を 取得 する 場合 に は 、「nodeType」 の 値 を 取得 し ノー ド が タグ か どう か を 調べ て か ら 取 得 す 
る よう に し て くだ さい 、。 


Safari っ の 場合 @Firefox ら の 場合 
S $。 ぁ avaScript Sample 
| eeemooceneme/oeto 寺 SCoooc | ーーーーーーーーーーーー 





ュ | や @ 9 人 @⑱ | e 較 Ia 
ボタ ン を クリ ッ ク す る と 、 ノ ー ド の タグ 名 を 表示 し ます 
Firefox を 結っ て みよ う 53 珠 ニ ュー ス 
ボタ ン を フリ ッ ク す る と 、 ノー ド の タグ 名 を 表示 し ます 


ここ は テキ スト ノー ド で す 、 [ ド の 2 名 を 表示 


ここ は テキ スト ノー ド で す 














OO 委 90-d ヨ ldYHO 















PS WCNINM | 還 CHAPTER-06 P 086 






















| すべ て の リン ク を 親しい ウィ ンド ウ よ た は タブ ) で 表示 し た い 、 坦 d 39V8SGDESGmDleiWndoveimtimetExplore 
| *※ の 2? つ は 、 は じ め か 5 新しい ウィ ンド ウ ま た は タプ) で 表示 穫 2N2 | 参 COavaSorpt-Samplew0 ・ | ヶ | x | uve search っ ・| 


人 交 | @ wespt sampe | | 信 ・- 団 ・ 四 ・ は ペー ジ (⑤) マ 
リン ク 集 


すべ て の リン ク を 親しい ウィ ンド ウ ( ま た は タブ ) で 表示 し た い 場 合 は ボタ ン を ウリ ッ ク し て くだ さい 。 
※ 下 の ? つ は 、 はじ めか ら 斬 し い ウ ィ ン ド ウ ( ま た は タブ ) で 表示 され ます 。 


































OO W 90- ヨ ldYHO 








ボタ ン を クリ ッ ク す る と 、 
リン ク の 「target」 属 性 
が find に 設定 され … 





リン ク を クリ ッ ク 
する と … 



















| Googe 欄 索 | | 
る ウェ ブ 全体 か ら 検 容 日 本 語 の ペー を 








新しい ウィ ンド ウ ( ま た は タプ) 
で リン ク 先 が 表示 され る 





[3 ⑳ イン ター ネッ ト | 保護 モー ド : 有効 


ReiWemeei 当 目 用 | 男 誠 際 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN "> 
<htm] > 
<head> 

<meta h ヒ モ 上 p-@Gqu1 マ = "Conen ヒ -E 上 ype" conEen ヒ = "ex 上 /htm1 : 

CharSe ヒ =uF-8"> 

< モ ュ 1 上 1e>JavaScrip 上 Samp1e</ 上 1 上 1e> 

<11nk re]="styleshee 上 " type="Eext/css" href="main.oss" 

media="a11"> 

< く SC エ 1D type="Eex 上 / JaVaSC エ 1p ヒ " SC="main . 8 "></ SC エ 1D セ > 


</head> の 


< くわ body テ > 

<h1> リ ンク 集 < /h1> 

すべ て の リン ク を 新しい ウィ ンド ウ (また は タブ ) で 表示 し た い 場 合 は ボタ ン を クリ ッ ク し て くだ さい 。 <b エ > 

※ 下 の 2 つ は 、 は じ め か ら 新 し い ウ ィ ン ド ウ ( また は タブ ) で 表示 され ます 。 

<fForm action=" ./cheoknode . Cg1" method= "ge 上 " name="matinForm"> 
<1npu 上 ype= "bu 上 Eon" 1d= "Se 上 Bu 上 ton" Ya1ue=" 別 窓 で 開く "><b ェ > 

</ Form> 

<u]1 1d="11inmkLis ヒ "> 
<11><a hreF= "hp : / /www . yahoo . Co . Jp/ ">Yahoo ! </a></ 1 ユエ > 
<11><a hreF= "hp : / /Www . doog1e . Co . Jp/ ">GooJ91e</a></ ユエ > 
<11><a hreF= "htp : / /Www . openSpc2 . or9/" き 。 


targe="Find">OpenSDpaCe< /a></ ユ > $ 
<11><a hrefF="h て tp : / /www . oo . ne . ]p/ " Earge キ 上 =" Find ">9OO</a></ ユエ > 
</u1> 
</body> 
</htm1> 





eXe 事 eg 当 目 用 main.js 


window.on1oad = Funotion( ) { 
document .getE1ementByTd ( " set 上 Buton" ) . onc1iock = Funoction( ) { 
var 1inkmag = document .gqetE1ementByTQd 由 
("11inkList" ) .getE1ementsByTagName("a"): |m 
For (Var =0: 1<1inkmag.1ength: ュ ++) {一 話 
Yar gt = 1inkTag [1] .get 上 Attribute ( "targe" ) : 一 攻 


すま (きも | != "まま mlP) に 
11inkTag [1] . se 上 AEtribue ( "targdet 上 ", "Find" ) : 
} 


頭 |D 名 「linkList」 内 に ある <a> タ グ の 情報 を 取得 する 

話 <a> タ グ の 数 だ け 繰 り 返 す 

医 「target」 属 性 の 値 を 読み 出す 

医 「target」 属 性 で 「find」 が 設定 され て いな い 場 合 は 、 タ ー ゲ ッ ト を 「find」 に 設定 する 


(@⑯ 拓 3) 電 個 届 性 の 読み 出し は 「getAttribute()」、 設 定 は 「setAttribute()」 で 行う 


タグ の 属性 を 読み 出す に は 、「getAttribute())」 を 使い ます 。 パラ メー タ に は 取得 し た い 属 性 名 を 指定 
し ます 。 属性 値 を 設定 し た い 場 合 に は 、「setAttribute()」 を 使い ます 。 最初 の パラ メー タ に 設定 する 属性 
名 、2 番 目 の パ ラメ ー タ に 設定 する 値 を 指定 し ます 。 

サン プル で は ペー ジ が 読み 込ま れる と <a> タ グ の [target」 属 性 が 指定 され て いる か どう か 調べ 、 指 定 さ 





れ て いな い 場 合 は 「target] 属 性 を 設定 する よう に し ます 。 これ に より 、 リ ンク を クリ ッ ク す る と 新た な ウィ 
ンド ウ ( ま た は タブ ) で 内 容 が 表示 され ます 。 
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SE の IN ll [し 」cHAPreeoe と | jogzl 
W」 馬 ノー ド を 複製 し て 追加 する 














ここ で は 、 ノ ー ド を 複製 し て 追加 する 方 法 に つい て 解説 し ます 。 





















































還 E | |(。 | の CavaScript-Sample\ ・| な | X | Hve< 
〇 
回 
そ 
選 陣 製 元 の テキ スト で す っ | 
あ 困 C:*ava Imple\ <| な | X 目 Live Search | 
つい に ニー = 三 コ ーー ニーーー デ ーーー ミ ーー ニュ ーー ae mm 
叶 | | 食 ・ 回 ・ 国人 は ペー ジ の ゆこ 
ロ 
還 ボタ ン を クウ リック する と 、 ノー ド を 複製 し て 追加 u ま す 。 

複製 し て 追加 する N 















陳 製 元 の テキ スト で す 
結果 : 
内 製 元 の テキ スト で す 








ボタ ン を クリ ッ ク す る と … 








複製 元 の ノー ド が 追加 され 、 
結果 の 領域 に コピ ー さ れる 








商 コン ピュ ー タ | 保護 モー ド : 無効 


SeiMXamwe 当 目 用 用 本 珍 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 
<me ヒ a h 上 上 わ ーGqdU1 マ = "で COn ヒ en 上 ype " Conten ヒ =" モ ex 七 /htm1: 
CharSe ヒ =utF-8"> 
< キュ 上 1e>JaVaSC エ ip 上 Samp1e</ ヒ 1 上 1e> 
<1ink re1="sty1leshee" type="Eex モ /css" hrefF="main.cSsS" 
media="a11 "> と の 
<8C エ 1p ヒ 上 yDe=" ヒ ら ヒ / ]a マ aSC エ 1D " 5 エ o= "ma1m .S "> く / SC ユヒ > 


</head> の 





Em 


< くわ body> 
ボタ ン を クリ ッ ク す る と 、 ノ ー ド を 複製 し て 追加 し ます 。 
<Form acC 上 1on=" ./dupnode . Cg1" method= "ge 上 " name="ma1nForm"> 

<1npu ヒ 上 ype= "bu 上 Eon" 1d= "QupBut て on" ゞ a1ue= "複製 し て 追加 する "><b エ > 

</ Form> 
<dQ1iV 1d="QNode" c1ass= "dup "><span> 複 製 元 の テキ スト で す </ span></d1 マ > 
<d1iv 1d="resu1 "> 結果 :</1 マ > 

</ body> 

</htm]> 





可 当 目 用 本 生生 main.js 


w1ndow.on1oad = funotion( ) { 
document . getE1emenEBy エ Td ( "dupBu て on" ) .onc1ick = Funotion( ) { 
Var d = document . getE1ementByTd ( "dNode" ) : 一 馴 
d = d.c1oneNode (true) : 一 話 
d.1d = "1d"+(new Date( ) ) .getTime( ) : 一 回 
documen . getE1ementByTdq ( "resu1" ) .appendChi1d(d) : 一 回 


トー 


… 複 製 元 の 情報 を 読み 出す (ID 名 「dNode]」) 

… 複 製 元 と し て 読み 出し た ノー ド を 複製 する (パラ メー タ に 「true」 を 指定 し て 子 ノ ー ド ご と 複製 する ) 
… ペ ー ジ 内 で 重複 し な い 新た な ID を 割り 当て る 

… 結 果 を 表示 する 領域 に 追加 する 


@7je】 遇 上衣 ノー ド を 複製 する に は 「cloneNode()」 を 使う 


ノー ド を 複製 する に は 、「cloneNode)」 を 使い ます 。 パラ メー タ に 「true」 を 指定 する と 、 ノ ー ド に 含ま れ 
る 子 ノ ー ド 以下 すべ て が 複製 の 対象 に な り ま す 。 「false」 を 指定 する と 、 複 製 時 に 子 ノ ー ド は 含ま れ な く な 
り ま す 。 複製 し た ノー ド は 、 そ の まま で は ペー ジ 上 に は 表示 され ませ ん 。 ペー ジ 上 に 表示 する に は 、 ペ ー ジ 
上 に ある ノー ド の いずれ か に 連結 する 必要 が あり ます 。 サン プル で は 、「appendChild()」 を 使っ て ノー ド 
を 追加 し て いま す 。 

な お 、 ノ ー ド を 複製 し た 後に は 、 必 ず 重 複 し な い ID 名 を 割り 当て て か ら ペ ー ジ 上 に 表示 する (連結 する ) 
よう に し て くだ さい 。 ID 名 が 重複 する と 、 正 し く 動 作 し な く な り ま す 。 


(@'W[ 有 im 明 ノー ド の 挿入 


「appendChild]」 は ノー ド を 未 尾 に 追加 し ます が 、 指 定 し た ノー ド の 前 に ノー ド を 挿入 し た い 場 合 に は 
「insertBefore ()」 を 使い ます 。 また 、prototype.jS を 使え ば 、 次 の よう に 手軽 に ノー ド を 挿入 する こと が 
で きま す 。 他 に も prototype.jS に は 「Insertion.Afterl「Insertion.Bottom]l「Insertion.Top」 が 用 意 さ 
れ て いま す 。 


new Tnserion . BefFore ("result 上 " , "サン プル ") : 











OH 委 90-d ヨ 1」dVHO 











〇 
由 
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セ 
ーー 
「m 
Ln 
の 
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し _」 
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〇 
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SECTION | 較 [czpresoe+[ loea] 
124 ノー ド を 削除 する 


ここ で は 、 ノ ー ド を 削除 する 方 法 に つい て 解説 し ます 。 





























二 コン ピュ ー タ | 保護 | 
















ode2. Node3.Node4.Node3 






ボタ ン を クリ ッ ク す る と … 





領域 内 の 最初 の ノー ド が 
削除 され る 








商 コン ピュ ユー タ | 保護 モー ド : 無効 


eee@m 当 目 用 上 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C/ /DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1> 
<head> 

<me ヒ a htDp-equ1 マ = "Conen ヒ - 上 ype" Conten ヒ =" モ ex 七 /htm] : 

CharSe モ =utF-8"> 

< モ ュ 1 上 1e>JavaSor1pE Samp1e</ モ 1 上 1e> 

<1ink re]="sty1eshee 上 " ype="Eex 上 /css" hrefF="main.csS" の 

media="a11 "> 。 


で SC エエ D 上 上 yp@= " 皮 上 / ゴ a マ aSC エ ユヒ" S エ Co= "ma1n . 8 "></ SC エ ュ ユヒ > 
</head> 【 
<body テ > 
ボタ ン を クリ ッ ク す る と 、 ノ ー ド を 削除 し ます 。 
<Form ac 上 ion=" ./rmmode .Cg1" method= "get 上" name="matinForm"> 
<1npu 二 type= "bu 上 ton" 1d=" ェ mBu そ on" Ya1ue=" ノ ー ド を 削除 ">< わ ェ > 
</ Form> 
<d1iV 1d="QNode" cl1ass="rm"><span>Node1</ span> , <Span>Node2</ Span> , 
<Span>Node3</ span> , <Span>Node4</ span> , <Span>Node5</ Span> に 
く /d1 マ > 
</body> 
</htm1> 


p@)9 





(ae)i 委 目 用 川本 WE 本 凍 あ main.js 


window.on1oad = fFunoction( ) { 
document .getE1ementByTd ( "て mButEon" ) .onc1iok = funoction ( ) { 
Yar d = qdocument .getE1emen モ ByTd ( "dNode" ) : 一 釧 
d.remoyeCh11d(d.FirstChi1d) : 一 許 
} 
} 


OO 90-d ヨ 1dVHO 


頭 削除 する ノー ド を 含む 領域 の 情報 を 読み 出す (ID 名 dNode) 
話 最初 の ノー ド を 削除 する 


(@⑯ 損 9】 出 上 衣 ノー ド を 削除 する に は 「removeChild()」 を 使う 
ノー ド を 削除 する に は 、「removeChild()」 を 使い ます 。 パラ メー タ に 削除 する ノー ド を 指定 し ます 。 サン 
プル で は 、 パ ラメ ー タ に [firstChild」 を 指定 し て 最初 の ノー ド を 削除 し て いま す 。 最後 の ノー ド を 削除 し た 
い の で あれ ば 、 パ ラメ ー タ に 「lastChild」 を 指定 し ます 。 
な お 、 削 除 す る ノー ド が 存在 し な い 場 合 は 、 エ ラー に な り ま す 。 これ を 防ぐ に は 、「childNodes.length] 
と し て 子 ノ ー ド の 数 を 調べ て か ら 削 除 す る よう に し ます 。 


(@'S)[jil 複数 の ノー ド を 削除 する 
複数 の ノー ド を 削除 する 場合 に は 、「for()」 を 使っ て 繰り 返し ノー ド の 削除 処理 を 行い ます 。 た だ し 、 こ の 


と き に 次 の よう に し て し まう と 、 期 待 通り に 動作 し な か っ た り エ ラー に な っ て し まう こと が あり ます 。 


Fo (Ya =O: ユエ < ノー ド の 長 さ : i++) { 
削除 処理 
} 


これ は 最初 か ら ノ ー ド を た どっ て 削除 する と 、 削 除 し た 時 点 で ノー ド の 参照 位置 が 変わ つて し まう た めで 
す 。 これ を 防ぐ に は 、 先 頭 か ら 削 除 す る の で は な く 未 尾 か ら 削 除 す る よう に し ます 。 
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W!21e】 前 後 の ノー ド を 参照 する 








ここ で は 、 前 後 の ノ ー ド を 参照 する 方 法 に つい て 解説 し ます 。 
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ーー | 人 で ・・ の こら は へ 0 ・ 







の esaetsams 











了 Eee 
= 上 OYK の ノー ド を 容 明 し ます 。 
ボタ ン を クリ ッ ク す る と … 
2: 拓 | 





叶 リード! ソー ド 2 ソ ー ド 3 
上 | SPAN 

DIV 

ブー ド 2 











前 後 の ノ ー ド を 調べ て タグ で 
あれ ば タグ 名 、 テ キス トノ ー ド 
で あれ ば テキ スト を 表示 する 








凍 コン ビュー タ | 保護 モー ド : 無効 
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ge 当 目 用 用 馬 誠 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML. 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<mea htp-equ1Y= "Conen 上 -type" conten ヒ ="Eex 上 /htm] : 
CharSe ヒ =utF-8"> 4 
< ヒュ ヒ 1 ら > け aVa8C エ 1p ヒ 上 Samp1e</ ヒ 上 1e> の 


0 





<1inik re]="sty1eshee" type="EexE/oss" hreF="main.CsS" 寺 。 
media="a11 "> キー 
< く 8SCr1p 上 上 ype= "上 ex / る VaSC エ 1D 上 " SC= "ma1in . 8 "></ SC エエ 1D ヒ > 


</head> 

< く bod ツ > 
前 後 の ノ ー ド を 参照 し ます 。 
<Form acC1on=" ./reFnode .Cd1" method= "ge ヒ " name= "ma1nForm"> 

<1npu 上 type= "butEon" 1d= "CheckBu ヒ Eon" Ya1ue= "ノー ド を 参照 ">< わ ェ > 

</ Form> 
<d1 で 1d="dNode "><Span> ノ ー ド 1 < / Span><Span> ノ ー ド 2</ span> まき -。 
<Span> ノ ー ド 3< / Span></ 1i マ ><d1 せ で 1d=" ェ eSu1 上 "></d ュ > ォ * 

</ body> 

</htm1> 





eXamgej 当 目 用 用 本 RS 交 main.js 


window .on1oad = fFunotion( ) { 
document . getE]1emenEtByTd ( "checkButEon" ) .onc1ick = Funotion( ) { 
ar base = documern .getE1ementByTdqd ( "QNode" ) : 一 馴 
Var res = document .getE1ementByTQ ( "reSu1" ) : 
Var text = oheokNode .prin (base . FirstChi 1d ) + " <b エ > " : 一 許 
ex 上 += cheockNode .prin (base . nex モ Sib1 id ) + "<b エ > " : 一 臣 
ex + ニ = 一 臣 
cheokNode .prin(base . 1astChi 1d .previousS1b1ing . FirstCh11d ) + "<D エ >" : 
reS . 1nnerHTMT, = ex: 
} 
} 
checkNode = 【 
pFin : Funotion (aNode ) { 


ifF (aNode .nodeType == 1)({ return aNode .tagName: } 
ifF (aNode .nodeType == 3) { reurn aNode .nodeVa1ue: } 
とら も um "ニー ニー" タ 
} 
} 
台 読み 出す ノー ド の 基準 と な る 領域 の 情報 を 読み 出す (ID 名 「dNode」) 
放 最初 の 子 ノー ド を 参照 する (<span>) 
話 次 の ノー ド を 参照 する (<div>) 
放 最後 の 子 ノ ー ド の 1 つ 前 の ノー ド の 子 ノー ド を 参照 する 


@ 加 3 計 】 租 previousSibling」「nextSibling」 で 前 後 の ノー ド を 参照 する 
1 つ 前 の ノー ド を 参照 する に は 「previousSibling] プロ パテ ィ 、 1 つ 先 の 「nextSibling] プロ パテ ィ を 








使っ て 指定 し ます 。 これ は 、 現 在 の ノー ド の 前 後 の ノ ー ド を 示す プロ パテ ィ で 、 現 在 の ノー ド の 子 ノ ー ド を 示 
すわ け で は な い 点 に 注意 し て くだ さい 。 
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Em 
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テキ スト ノー ド を 作成 する 
































ボタ ン を クリ ッ ク す る と … 





1 | 時 31 分 29 徐 





現在 の 時 刻 が テキ スト ノー ド 
と し て 追加 表示 され る 





上 商 コン ビ ピュータ | 保護 モー ド : 無効 





(@⑨9@ 事 @) り ) 


時 目 上 怠 天 際 index.htm 


<!DOCTYPBE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transiiona1 / /EN"> 
<htm1] > 
<head> 

<meta h ヒ tp-equ1Y= "ConEen ヒ -type" ConEen ヒ =" モ ext/htm] : Mg 

で harSeG キ =utF-8"> 

< ヒュ 上 1e>JavaSocrip 上 Samp1e</ ヒ 1 上]e> 

<1ink re]="sty1eshee" type="Eex モ /css" hreF="main.css" 

media="a11"> as 

ぐ SC エ 1D 上 上 YDe=" ヒ @ 七 / Ja マ aSC エ 1D 七 " Sro= "ma1in . 8 "> く / SC エ 1D ヒ > 


</head> の 


<body テ > 
テキ スト ノー ド を 作成 し て 現在 時 刻 を 表示 し ます 。 
<Form ac 上 ion=" ./mknode . Cdg1" method= "gdet" name="mainEForm"> 

< く 1npu 七 上 ype= "bu て ton" 1d= "CreaeBuEon" Ya1ue= "ノー ド を 生成 ">< わ ェ > 

</ Form> 
<d1V 1d=" エ eSu1 上 "></d ュ マッ > 

</body> 

</htm1> 


Realseg 当 目 用 用 本 WE 本 main.js 


window.on1oad = fFunotion( ) { 

document . getE1ementByTq ( "createBuEton" ) .onc1iock = fFunotion ( ) { 
var dateOb] = new Date() : 
Var h dateOb〕] . detHours ( ) : 
Yar m = dateOb] . getMinutes ( ) : 
Var 5 = qateOb] . getSeconds ( ) : 
var ex = document .createTexENode (h+ "時 "+m+ "分 "+5+" 秒 ") 一 話 
document . getE1emenEByTd ( "resu1 七 " ) .appendChi 1d (上 ex) : 一 話 








OO 上 90-d ヨ ldVHO 


…「Date」 オ プ ジ ェクト を 生成 し て 現在 の 時 刻 を 読み 出す 
… テ キス トノ ー ド を 生成 する 
生成 し た テキ スト ノー ド を 領域 に 連結 し て ペー ジ 上 に 表示 する 





@jjg】 秀 テキ スト ノー ド の 生成 は Tdocument.createTextNode()」 を 使う 


テキ スト ノー ド を 生成 する に は 、「document.createTextNode()」 を 使い ます 。 パラ メー タ に 生成 す 
る テキ スト を 指定 し ます 。 テキ スト ノー ド を 生成 し た だ け で は ペー ジ 上 に は 表示 され な い の で 、 ペ ー ジ 上 の 
ノー ド に 連結 する 必要 が あり ます 。 

サン プル で は 現在 の 時 刻 を テキ スト ノー ド と し て 生成 し 、<div> タ グ で 指定 され た 領域 の 未 尾 に 追加 し て 
いま す 。 


(SI[jill コメ ント ノー ド を 生成 する 


テキ スト ノー ド や エレ メン ト だ け で な く コ メン トノ ー ド も 生成 する こと が で きま す 。 コメ ント ノー ド を 生成 
する に は 「createComment()」 を 使い ます 。 パラ メー タ に は 生成 し た い コ メン ト 内 容 を 指定 し ます 。 


Var commenENode = qdocumen .cCreateCommen ( "出版 社 か ら の コメ ント " ) : 
documen . getE] ementByTdq ( "resu1 モ " ) .appendChi 1d (commentNode ) : 














SE | | 較 CHAPTER-06 |091 
0 上 エレ メン ト を 作成 する 


ここ で は 、 エ レ メ ン ト と し て <span> タ グ を 作成 する 方 法 に つい て 解説 し ます 。 
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Live Search お ・ 


信 ・ 回 ・ 提 ・ は ペー ジ の て 





1 





ボタ ン を クリ ッ ク す る と … 






有 | ボタ ン を ウリ ッ ク す る と 、 span タ グ を 生成 し て 現在 時 刻 を 表示 し ます 。 






spPan エ レ メ ン ト を 生成 N 









<Span> タ グ が 作成 され 、 そ こ 


へ 現在 の 時 刻 が 追加 され る テコ 
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ReiWNamse 当 目 用 | 馬 因 了 index.htm 


<!DOCTYPE htm1] PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1]> 
<head> 

<me ヒ a h 上 上 わ -eGqu1 マ = " Conen ヒ 上 ype" ConEen キ = " ヒ ex 七 /htm] : 
CharSe ヒ =uF-8"> 
< ヒュ ヒ ] ら >JaVa8C エ 1p ヒ 上 Samp1e</ ヒ 1 上 1e> 
<1ink re]1="styleshee ヒ " type= "tex 七 /css" hrefF="mainm.CSS" 
media="a11"> の 








く 8C エ 1p 七 上 De= " 七 ヒ 上 / aaSC エ 1 上 " 5 エ c="matn . 8 "></ SC エ ュ ユヒ > 


</head> 
<Dbody> 
ボタ ン を クリ ッ ク す る と 、span タ グ を 生成 し て 現在 時 刻 を 表示 し ます 。 
<Form acC1on=" ./mknode .Cg1" method= "ge ヒ 上 " name="matinForm"> 


<1npu 七 上 ype= "Du 上 Eon" 1d= "CreaeBuEton" 
Ya1ue= " span エ エレメント を 生成 ">< わ ェ > 4 


</ Form> 
< く d ュ 1 1d=" エ eSu1 上 "></1 マ > 
</ body> 
</htm1]> 
Se7WXg 事 %e 直 目 朋 上 main.js 





window .on1oad = Funoction ( ) { 
document . detE] ementByTd ("createButon" ) .onc1ick = Funotion( ) 【 
vVar dateOb] = new Date() : 
var h = qateOb] . getHours( ) : 
Var m dateOb] . getMinutes( ) : 
Var 5 = dateOb] . getSeconds ( ) : 
var brmTag = document .createE1 ement ( "br" ) : 一 話 
var spanTag = document .createE1ement ("span" ) : 一 思 
spanTag.cl1assName = "note" : 一 放 
spanTag .1nnerHTMT, = h+" 時 "+m+ "分"+S+" 秒 " : 一 回 
document . getE] emenEtByTqd ("resu1 モ " ) .appendChi1d (spanTag) : 
document . getE1emenEtByTdq ( "resu1" ) .appendChi1d (brTad) : 


トー 





…「Date」 オ ブ ジ ェクト を 生成 し て 現在 の 時 刻 を 読み 出す 
… エ レ メ ン ト (<br>) を 生成 する 

・ エ レ メ ン ト (<span>) を 生成 する 

… 生 成 し た <Span> の スタ イル シー トク ラス 名 を 設定 する 
表示 する 内 容 を <span> に 設定 する 
…<Span> と <br> を ペー ジ 上 に 出力 する 





@】 損 9】 郁 エ レ メ ン ト の 生成 は 「document.createElement()」 を 使う 
エレ メン ト を 生成 する に は 、「document.createElement()」 を 使い ます 。 パラ メー タ に 生成 する タグ 
名 を 指定 し ます 。 エレ メン ト を 生成 し た だ け で は ペー ジ 上 に は 表示 され な い の で 、 ペ ー ジ 上 の ノー ド に 連結 
する 必要 が あり ます 。 





サン プル で は 現在 の 時 刻 を 表示 する た め 、<span> タ グ を 生成 し 内 容 と し て 設定 後 、<div> タ グ で 指定 さ 
れ た 領域 の 未 尾 に 追加 し て いま す 。 
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SEcCTION | 


1 き 邦 有 まとめ て ノー ド を 追加 する 


こ で は 、 大 量 の 乱数 を 生成 し 、 そ れ ら を まとめ て ノー ド と し て 追加 する 方 法 に つい て 解説 し ます 。 
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コン ピュ ー タ | 保護 モー ド : 無効 













ボタ ン を クリ ッ ク す る と … 





bo255736171l9615 
B2244873334836015 
.7843196487358689 
6.871287854117918 
1.3709352721749838 
5.0139774301610895 
6.316518751993728 
5932100170529194 
443478903179537 
B.9977106621540414 
1.3155980577475243 
035736543397257 
409720271708977 










乱数 が ペー ジ 上 に 表示 され る 






























商 コン ピュ ー タ | 保護 モー ド : 無効 








ReiWemee り 当 目 用 | 馬 了 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Trans1tiona1 / /EN"> 
<htm1] > 


<head> の 








<meta h 上 上 わ -Gqdu1 マ = "で Onen ヒ ELype" ConEen ヒ =" モ ex 上 /htm1 : 
Cha エ SeG ヒ =u 上 fF-8"> 
< ヒュ 上 1e>JaVaSo エ ip 上 Samp1e< / 上 ヒュ 上]e> 
<1ink re]="styleshee" ype="tex モ /css" hrefF="main.Css" = 
media="a11 "> 和 
く 8SC エ 1Dp 上 上 ype= "上 xx 上 / る VaSC エ 1 エ D ヒ " S エ C= "ma1m .S "></ SC エエ ユヒ > 
</head> 
<Dbod ア > 
ボタ ン を クリ ッ ク す る と 、 忠 数 が 一 括 で 表示 され ます 。 
<fForm ac 上 ion=" ./mknode . Cg1" method= "get" name="mainForm"> 
<1npu 上 ype= "buton" 1d="adQdButton" Ya1ue= "ノー ド を 一 括 し て 追加 ">< わ ェ > 
</ Form> 
<d1V 1d=" エ eSu1 "></d1 マ > 
</body> 
</htm1 > 





Reg 事 9e9 り 当 目 旧 目 main.jS 
window.on1oad = fFunotion( ) { 
document . getE1ementByTd ( "addButon" ) .onc1iok = Funoction ( ) { 
Yar QFNode = qocumen . createDocumentFragmern ( ) : 一 斑 
For (var 1=0: 1<1000: i++){ 
Yar ex = qoocument .createTexENode (Math .random() * 6 + 1): 一 話 
Yar divTag = document .createE1ement ("div" ) : 一 回 
divmTag . appendChi1d (text) : 一 話 
dENode . appendChi1q (divTag) : 一 回 
} 
document . getE1ementByTd ( "resu1 上 " ) .appendChi1q (dENode) : 一 回 


トー 


… ドキ ュ メ ント フラ グ メ ント を 用 意 す る 

・ 乱 数 を 生成 し テキ スト ノー ド と する 

… エ レ メ ン ト (<div>) を 生成 する 

… 生 成 し た <div> に テキ スト ノー ド を 追加 する 

… ド キュ メン ト フ ラグ メン ト に 生成 し た エレ メン ト ( テ キス トノ ー ド を 追加 し た <div> タ グ ) を 追加 する 
… こ れ ま で に 生成 し た ノー ド を まとめ て ペー ジ 上 の 付 域 に 追加 する 








@ 損 抽 9) 還 個 大 時 の ノー ド を 追加 する 場合 は 「document.createDocumentFragment()」 を 使う 


DOM(Document Object Model: ド キュ メン ト オ ブ ジェ クト モデ ル ) で の ノー ド の 負 理 が 大 量 に 行わ れ 
た 場合 に は 、 処 理 速 度 が 低下 し て 動作 に 支障 を きた す 場 合 が あり ます 。 その よう な 場合 に は ドキ ュ メ ント フ 


ラグ メン ト を 生成 し 、 そ こ に ノー ド の 追加 な どの 処理 を 行い 、 最 後に 一 括 し て ペー ジ 上 に 表示 する こと が で 
きま す 。 











OO W 90 -3 ヨ 1dVHO 


OO 委 90- ヨ IdVHO 





HTML ペ ー ジ 内 の コメ ント 内 容 を 取得 する 


DOM が 扱え る ブラ ウザ で は 、JavaScript に よっ て HTML タ グ や テキ スト を ノー ド し て 読み 出す こ 
と が で きま す 。 次 の サン プル は 、 コ メン トノ ー ド を 読み 出し て コメ ント 内 の 文字 を 表示 する プロ グラ ム 
で す ( エ ンコ ー ド し た 結果 が 表示 され る )。 た だ し 、Safari の で は 、HTML タ グ の コメ ント ノー ド を 読み 出 
すこ と が で き な い の で 注意 し て くだ さい 。 

HTML フ ァイル 
<d1iY 1d= "photoA1bum "> 
<1mg Sro="1mages/DSC0001 .Jpg" width="240" heigh ヒ ="135"><!ーー 
Samp1e1 --> 
<1md Sro="images/DSC0042 .]pg" width="240" height="135"> 
<1mg Sro="1mages/DSC0103 . pg" width="240" height="135"> 
</d1> 


⑮JavaSoript フ ァイル 


window.on1oad = function( ) { 
Yar 1mgTag = document .getE1ementByTdq ( "photoA1bum'" ) . 
getE1]ementsByTagName ( "1mqd" ) : 
a1ert (escape ( imgTag [0] .nextSib1ing .nodeVa1ue) ) : 








間 avaScript Sample - Windows Intermet Explorer 指 三 昌 旧 ロ 肖 ほ メ 名 | 
(に 。) | きま コラ ム * 穫 6 <| ヶ | x | uve seara p | 
YY < 次 | 突 JavaScript Sample 租 ・ 較 ・ 直 ・ 





] メ ント テス ト 





Internet Explorer ア 
で の 実行 結果 
























。 CHAPTER-0Z 


スタ イル シー ト 
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SEcCTION | 劇 


スタ イル シー ト を 制御 する 
0 方 法 に つい て 


還 還 2》) スタ イル シー ト の 制御 方 法 


JavaScript で は 、 定 義 さ れ た スタ イル シー ト プ ロ パテ ィ 値 を 参照 し た り 、 設 定 し た りす る 方 法 が いく つか 用 意 
され て お りら り 、 目 的 に 応じ て 使い 分 け ま す 。 

読み 出さ れる 値 は ブラ ウザ に よっ て 異な り 、1 6 進数 の 値 で 返す ブラ ウザ も あれ ば 、 定 義 し ん た カラ ー 名 (red な 
ど ) を その まま 返す プラ ウザ も ある の で 注意 が 必要 で す 。 その た め 、 ど の 方 法 で スタ イル シー ト プ ロ パテ ィ 値 を 
読み 出し た の か 、 把 握 し て お く 必 要 が あり ます 。 

JavaSoript で スタ イル シー ト の プロ パテ ィ を 指定 する 場合 に は 、「color」 や 「position] な どの よう に その ま 
ま 指 定 で きる スタ イル シー ト プ ロ パテ ィ と そう で な い ス タイ ル シ ー ト プロ パテ ィ が あり ます 。 た と えば 、 ス タイ ル 
シー ト で 背景 色 を 示す プロ パテ ィ は 「background-color」 で す が 、JavaScript で は この まま 指定 する こと は 
で きま せん 。 この 場合 、 プ ロ パ ティ 名 か ら 「-」 (ハイフン) を 削除 し て 直後 の 文字 を 大 文字 に し て 指定 し ます 。 
「background-color」 で あれ ば 、「backgroundColor」 と な り ま す 。 





> HTML タ グ の 「style」 属 性 を 利用 する 方 法 
HTML タ グ の 「style」 属 性 に 直接 指定 され た スタ イル シー ト プ ロ パテ ィ は 「style. プ ロ パ ティ 名 」 と し て 参照 / 
設定 する こと が で きま す 。 この アク セス 方 法 は 、 古 い ブ ラウ ザ で も 利用 する こと が で きま す 。 
匠 DOM を 利用 する 方 法 サン プル の 、 こ の ボタ ン を クリ ッ ク す る と ・・・ 
HTML タ グ で 「style」 属 性 が 指定 され て いな 了 > ーー つら ョ | 
い 場 合 な ど 、「document.defaultView. 
getComputed Style()」 を 使っ て 、 実 際 に ブ 
ラウ ザ に 表示 され て いる プロ パテ ィ 値 を 読み 出 
す 方 法 も あり ます 。 読み 出す プロ パテ ィ 名 は 、 
「getPropertyValue()」 で 指定 し ます 。 た だ し 、 
この 方 法 は DOM が 利用 で き な い ブラ ウザ や 古 
い ブ ラウ ザ で は 利用 で き な い の で 注意 し て くだ 
さい 。 な お 、Internet Explorer は 、 こ の 方 法 で 
は な く 、HTML タ グ オ ブ ジ ェクト の 「current ここ の スタ イル シー ト を 読み 出す こと が で きま す 
Style.getAttribute ()」 を 使っ て プロ パテ ィ 値 ID 名 「box1」 
を 読み 出し ます 。 」 

















1 商 コン ピュ ー タ | 保護 モー ド : 無効 累 100% 5 
了 y 外部 CSS に 直接 アク セス する 方 法 DOM を 利用 し て 、ID 名 が 「box 1 」 の 文字 色 を 実際 の 
別 フ ァイル で 定義 され て いる スタ イル シー ト ブラ ウザ 上 か ら 取 得 し て 表示 する 


プロ パテ ィ 値 を 読み 出す こと も で きま す 。 その 
昌 合 、「document.styleSheets.item()」 を 使い ます 。 「item()」 の パラ メー タ に は 、 読 み 出す スタ イル シー ト 
の 順番 を 指定 し ます 。 この 順番 は 最初 が O0 番 に な り ま す 。 

この スタ イル シー ト か ら 読 み 出す セレ クタ を 「cssHules.item()」 を 使っ て 、 読 み 出す 位置 を 指定 し ます 。 


Internet Explorer の 場合 は 、「rules.item()」 を 使い ます 。 
外部 CSS に アク セス し て 読み 出さ れる プロ パテ ィ 値 は 、 画 面 に 表示 され て いる 値 で は な く 、 実 際 に ファ イル 内 
で 定義 され て いる 値 に な る と いう こと に 注意 し て くだ さい 。 












二 番 目 の ボ タン を クリ ッ ク す る と 、 外 部 CSS ーー 
に 直接 アク セス し て 、ID 名 が 「box 1」 の スタ = 
イル シー ト の 文字 色 を 取得 し て 表示 する 















ID 名 「box1」 
章 コン ピュ ー タ | 保護 モー ド : 無効 









一 番 下 の ボタ ン を クリ ッ ク す る と 、ID 名 が 
「box1」 の 「style」 属 性 に 指定 され て いる スタ 
イル シー ト か ら 文 字 色 を 取得 し て 表示 する 







ID 名 「box1」 
机 コン ピュ ー タ | 避 護 モー ド : 無効 












邊 目 邊 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Trans1iona1] / /EN"> 
<htm1 ユ > 
<head> 
<meta htp-equ1i マ = "oonten ヒ -ype" Conen ヒ =" モ ex 上 /htm1 : 9 
charse ヒ =uF-8"> 
< 上 1 上 1e>JaVYaSCr1p 上 Samp1e</ ヒ 1 上 1e> 
<11ink re]1="sty1eshee 上 " type="text/css" hreF="main.CSS" 9 
media="a11 "> 
<SC エ 1p 上 上 yDe= "上 Gxx / る 8C エ 1D 上 "SC= "matn . 8 "></ SC エ 1D セ > 
</head> 
<body テ > 
ボタ ン を クリ ッ ク す る と 、 ス タイ ル シ ー ト の 情報 を 表示 し ます 。 
<fForm action=" ./getoss .Cg1" method= "ge" name="matnForm"> 
<1npu ヒ type="button" 1d= "getButton1" う 
value="box1 の 実際 の 文字 色 を 表示 "> 
<1npu 上 ype= "button" 1d= "detButton2" の ) 
va1ue= "box1 の 外部 CSS で の 値 を 表示 "> ニー 
<input type="buton" 1d="getBuEtEon3" 
Ya1ue= "box1 の co1or の sty1e 属 性 値 を 表示 ">  - の 














テー で へ 必 | 上 /0 -3 ヨ 1dVHO 





テー ご へ 必 l 邊 /0-3 コ 14VHO 


アア 0 





の 


</ 


< く / Fo エ m> 
<QdQ1V 1d=" エ eSu1 上 "></d1 マ > 


<div 1d="box1" sty1e="co1or : red"> こ この スタ イル シー ト を 読み 出す こと が で きま す 『 


</d1 マ > 
</body> 
htm1l> 


ea 事 we 当 目 用 用 本 RS 韻 参 main.jS 


window.on1oad = Funotion( ) { 


トー 


回 回 回 回 


沿 同国 


document . getE1ementByT エ d ( "detButEon1" ) .onc1ick = Funoion( ) { 
Var Co1: 
var divTag = documen .getE]ementByTq ( "box1" ) : 
ifF (document .defau1tView) { 
co1] = document .defFau1EView . detComputedSty1e (divTag, 
nu1] ] ) .get 上 PropertyVa1ue ("Co1or" ) : 
} 
if (divTag . CurrentSty1e) { 
co1] = divmTag . Cu エエ enESty]e . detAE モ 上 ribue ("Co1or" ) : 
} 
document . getE1ementByTq ( "resu1 上 " ) . innerHTMTL, = Co1: 
} 
document . qetE1emenEtByT エ Td ( "getEButEon2 " ) .onc1ick = fFunotion ( ) { 
Var CSSVa1uG: 
Yar QivTag = qdocument .getE1ementByTdqd ( "box2" ) : 
Var ossRoot = document . styleSheets .1Eem ( 0 ) : 一 回 


ifF (cssRoot .cssRu1es ) { 
csSVa1]ue = ossRoo .cssRu1es .1em ( 3 ) . Sty1e . Co1or: 
ja 
ifF (cssRoo .ru1es) 【 
CSSValue = CSS < 
} 
document . getE1emenEByTdq ("resSu] 上 " ) . 1nnerHTMT, = osSVa1u6e: 
} 
document . getE]1emenEByTd ( "getButEon3" ) .onc1ick = Funotion( ) { 
Yar divTag = document .getE1lementBy エ Td ( "box1" ) : 
documenrt . getE1ementByTq ( "resu1" ) .1nnerHTMTL, = 
divTag . st 上 y1e . Co1o エ : に 」 


に 


面 上 に 表示 され て いる 実際 の 文字 の 色 を 求め る (DOM に 対応 し た ブラ ウザ の 場合 ) 

上 に 表示 され て いる 実際 の 文字 の 色 を 求め る (Internet Explorer の 場合 ) 

され て いる スタ イル シー ト の 最初 の セレ クタ を 指定 する 

義 さ れ て いる スタ イル シー ト の 4 番目 の セレ クタ の 文字 色 を 求め る (DOM に 対応 し た ブラ ウザ の 場合 ) 
































詩 回 





に に = 





回 定義 され て いる スタ イル シー ト の 4 番目 の セレ クタ の 文字 色 を 求め る (Internet Explorer の 場合 ) 
話 タグ に 指定 され て いる style 属 性 で の 文字 色 を 求め る 





SeXemwe 当 目 用 用 WeS ァ main.css 


body 【 
background-Co1 or : #FFF: 
CO1o エ :#333: 
Fon-size:80 和 名 : 
1ine-height:1.8: っ 
} 
hd t 
Font-gize : 1 4 : 
CoO1or:#777: 
padding: 0: 
margtn:0: 
} 
Form { 
wi1qdth:300px: 
padding : 8Dx: 
border : 1px #ddF so11qd: 
background-Co1or:#EOFOFFf: 
} 
#box1 {一 台 
width:300px: 
padding : 8D 交 : 


テー で へ 2I 自 /0-3 ヨ 1dVHO 


Co1or :#2233fFF : 一 放 
border : 1px #Fdd so11d: 
background-Co1or :#FEFOFO: 
} 
#resu1 { 
wiqdth:300px: 
padding : 8Dx: 
border : 1px #dFd so11d: 
background- で oo :#EOFFF0: 





台 JavaScript で 取得 する セレ クタ の 位置 
話 JavaScript で 取得 する 文字 色 














SECTION 議 CHAPTER-07 ぁ 094 


@1@ 万 文字 色 と 背景 色 を 設定 する 








ここ で は 、 文 字 色 と 背景 色 を 設定 する 方 法 に つい て 解説 し ます 。 




















昨 の ラー も シーー 























8 = 
文字 : 2 
呈 | 。 色 を 指定 し て ボタ ン を 
回 N | クリック す る と … 
ミ 」 
| 
了 ここ の エリ ア で 背景 色 と 文字 色 を 確認 で きま す 。 | 
タ 8 
2 
ル | | 
シ | 上 ー | | 
| | 6 
ト トーーーー 
| 
| 
| 
| 
ポッ クス の 文字 色 と 背景 色 が 
指定 し た 色 に 変更 され る 











剖 コン ピュ ユー タ | 保護 モー ド : 無効 胃 10096 < 


EE ーー 


ee 雪 eem 当 目 用 馬 因 際 index.htm 


< く !DOCTYPE htm] PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm1 > 


<head> ひ の 





222 


<meta h 上 上 p-eGqdu1 マ ="ConEen ヒ -t 上 ype" ConEen ヒ = "上 ex /htm1 : 
CharSe ヒ =uF-8"> 
< ヒュ 上]1@> 了 JaVa8C エ 1p 七 Samp1e</ ヒ 1 上 1]e> 
<1ink re1="sty1eshee" type="Eex 七 /css" hrefF="main.cCs8" = 
media="a11 "> デ 
こく SC エ 1Dp 上 上 yDe= "上 G メ ヒ 上 / る びる SC て 1D 上 " 5S エ C= "ma1n . 8 "></ 8C エ ュ エセ > 
</head> 
<body> 
ぐれ Ts ガ ラージ 三 レー ター< び /R テ 
<fForm act1on=" ./setoss .Cg1" method= "ge 上 " name="mainForm"> 
文字 色 :<1nput type="E 上 ex 上 " name="EexECo1or" " 
ュ 1d= "上 @Gxt 上 CoO エエ" で a1ue=" 提 上 下 下 "> ッ < わ エ > + ご 
背景 色 :<1nput type="EtexE" name="bgCo1or" = 
1d= "bgCo1or" Ya1ue="#008"><b エ > 6 
<1npu 七 上 yDe= "Du 上 ton" 1d= "SeButton" ゞ a1ue=" ス タイ ル を 変更 "> 
</ Form> 
<d1Y 1d="resu1 モ 上 "> ここ の エリ ア で 背景 色 と 文字 色 を 確認 で きま す 。 < /d1 マ > 
</body> 
</html> 


OE | 上 財 main.js 


window.on1oad = funotion( ) { 
document . getE1emenEByTdq ( "set 上 Buton" ) .onc1ick = Funotion( ) 【 
Ya Co1or = document .getE1emenEByTd ( "textCo1or" ) .va1ue: 一 名 
Var bCo1or = qoocument .getE1emenEtByTdq ( "bgCo1or" ) .Va1ue: 一 話 
document . getE1ementBy エ Td ( "resu1 上 " ) . Style.co1or = て Co1or: 一 回 
話 一 document . getE1ementByTd ( "resu1 ヒ " ) .sty1e .backgroundCo1or = bCo1or: 
} 


De)9I@ 事 @@ 





トン 


… テ キス ト フ ィ ー ル ド に 入力 され て いる カラ ー コ ー ド (文字 色 ) を 読み 出す 
… テ キス ト フ ィ ー ル ド に 入力 され て いる カラ ー コ ー ド (背景 色 ) を 読み 出す 
…ID 名 「result」 の タグ の 文字 色 を 設定 する 
…ID 名 「result」 の タグ の 背景 色 を 設定 する 


(@7i】 映 個 文字 色 は 「color」、 背 景色 は 「backgroundColor」 で 指定 する 


JavaScript か ら 画 面 上 の スタ イル シー ト を 操作 する に は 、 操 作 し た い タ グ の 「style」 オ ブ ジ ェクト の プ 
ロ パ ティ に 値 を 設定 し ます 。 文字 の 色 は 「color]」 プ ロ パ ティ 、 背 景色 は 「backgroundColor」 プ ロ パ ティ で 
指定 し ます 。 指定 で きる 値 は HTML の カラ ー 名 だ け で な く ス タイ ル シ ー ト で 指定 で きる 形式 (「rgb(ー)」 や 


「#35f」 な ど ) も 可能 で す 。 





テー で へ YA 目 /0 -4 ヨ 1dYHO 
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eakeN 間 用 [| 」cHAPrEkoz | ogs] 


1 用 不透明 度 を 設定 する 


ここ で は 、 不 透明 度 を 設定 する 方 法 に つい て 解説 し ます 。 











不透明 度 の 確認 










不 衝 明 度 : 0.1 


に 


不透明 度 を 入力 し て ボタ ン を 
クリ ッ ク す る と … 











| 不透明 度 の 確認 
不 科 明度 : 0.1 


ボッ クス の 不透明 が 
変更 され る 





曽 コン ビュ ユー タ | 保護 モー ド : 無効 


の 9|@: 





@@ 当 目 用 | 馬 I 員 際 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm1 > 


<head> の 


<me ヒ a h ヒ モー-@Gqui マ = "ConEen ヒ 上 yDe" ConEen ヒ = "上 ex モ /htm1: = 
CharSe モ =utF-8"> 

< ヒュ 1 上]1e6> ゴ aa8C エ 1p ヒ Samp1e< / ヒ 1 上 1]e> 

<]ink re]="styleshee" type="Etex ヒ 上 /css" hrefF="main.Css" *o 


media="a11 "> +ー 
く SC エ 1p ヒ 上 上 ype= "上 @ 文 上 / る び aSC と て 1D ヒ "5S エ C= "ma1m . 8 "></ SC エエ D ヒ > 
</head> 
< く Dod ツ > 
<h1 > 不透明 度 の 確認 </h1> 


<Form action=" ./setcss .Cg1" method= "ge 上 " name="mainForm"> 
不透明 度 :<1nput ype="text 上 " name="opac" 1d="opac" 寺 。 


Ya1ue=" 0 .25 ">< わ ェ > + ご 
<1npu 上 type="buEton" 1d="setButon" va1ue=" 不 透明 度 を 変更 "> 
</ Form> 
<d1iY 1d="resu1 上 "> ここ の エリ ア で 不透明 度 を 確認 で きま す 。 < /d1 マ > 
</body> 
</htm1> 





eXageg 当 目 用 用 本 本 富 衣 輝 main.js 


window.on1oad = funoction( ) { 
document . getE1emenEtByTd ( "setButton" ) .onc1iock = Funotion( ) { 

var n = parseF1oat (document . getE1emenEByTd ( "opac" ) .value) : 一 馴 

if (windlow .createPopup) {一峰 
document . getE1emenEByTd ( "resu1 上 " ) .F11ters .a1pha . Opacity = |m 
n※* 100: 

})e1se{t 
document . getE1ementByTd ( "resu1 ヒ " ) .style.opaoity = n: 一 話 


トー 


… テ キス ト フ ィ ー ル ド に 入力 され て いる 不透明 度 を 読み 出す 
…Internet Explorer か どう か 判別 する 

… 不 透明 度 を 設定 する (Internet Explorer の 場合 ) 

… 不 透明 度 を 設定 する (Internet Explorer 以 外 の ブラ ウザ ) 


(@ 頂 彰 6】 間 條 不透明 度 は 「opacity」、「filters.alpha.Opacity」 で 指定 する 


不透明 度 が 指定 で きる ブラ ウザ は 限定 され て お り 、Internet Explorer4 以 降 、Safari、Operag 以 降 、 
Firefox が 対応 し て いま す 。 また 、 不 透明 度 の 設定 は Internet Explorer と 、 他 の ブラ ウザ で 異な っ て いま 


す 。Internet Explorer の 場合 は 、 フ ィ ル タ の 「alpha.0pacity」 プ ロ パ ティ に 0 100 ま で の 値 を 設定 し 
ます 。 Internet Explorer 以 外 の ブラ ウザ で は 、 ス タイ ル シ ー ト の 「opacity」 プ ロ パ ティ に 0 1 .0 ま で の 
小数 値 で 指定 し ます 。 
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SEE⑨INN 則 [し ICHAPrER0z と | joee| 


@ ぐ 1 月 現在 の スタ イル 情報 を 読み 出す 





テナー ご さ > 上 /0-3 ヨ IdYHO 








ここ で は 、 タ グ に 設定 され て いる 実際 の スタ イル プロ パテ ィ 値 を 読み 出す 方 法 に つい て 解説 し ます 。 





(の 吉 |@ cwavasept-sam <| ヶ | xtwe seareh ま の ・| 
次 w |@@mwasoptsame | | 谷 ・ 回 ・ 晶 ・ 叶 ペー ジ の マー 








座標 と 大 き さ の 確認 

















交信 |@Jescptsampe | | 信 ・ 加 ・ 下 ・ 加 ペー ジ の マー 





信念 |@ Comeszprser ・| ヶ | x luvesear る ・| 


> 




















の エリ ア の 座 提 値 が 表示 され ます 。 n 
BE 座標 と 大 き さ の 確認 

ボタ ン を クリ ッ ク ここ の エリ ア の 在 神 値 が 表示 され ます 。 

する と … ボッ クス の 座標 値 と 


ba 座標 (auto.auto) で 大 き さ は B00pxsuto] で す 
大 き さ が 表示 され る 








Eee 本 当 目 用 用 本 語 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1] / /EN"> 
<htm1] > 
<head> 
<meta htp-equ1Y= "ConEenE-type" conten ヒ ="tex モ /htm1 : き 。 
Cha エ Se ヒ =uF-8"> 
< モ ュ 1 上 1]e>J け ayaSorip Samp1e</ 上 1 上 1e> 
<1inik re]="sty1esheet" type=" モ ex モ /cCss" hrefF="main.CS8g" 
med1ia="a11 "> ピ 
ぐ 8SC エ 1p 上 上 yDe= "上 上 / JaVaSC エ 1D 七 " 8 エ C="ma1n . 8 "></ SC エ 1p ヒ > 
</head> 
<bod ツ > 
<h1 > 座標 と 大 き さ の 確認 </h1> 
<Form action=" ./readoss .Cdg1" method= "ge 上 " 
1dq= "mainEForm" name="ma1inForm"> 
<1npu 上 ype= "buEEon" 1d="readBu モ on" Ya1ue=" 確 認 ">< わ エ > 


</ Form> 
<d3V 1d 三 9Dox*> 
ここ の エリ ア の 座標 値 が 表示 され ます 。 <b エ > の 


) 


< く Span 1d=" エ esSu1 ヒ "> 結果 :</ Span> 
< く /d1 マ > 
</body> 
</htm1> 





SeWXae@ 可 当 目 用 用 WeS 移 main.css 


window .on1oad = fFunotion ( ) { 
document . getE1ementByTdq ( "readBuEon" ) .onc1ick = Funotion ( ) { 
var xx = CssTnfFo.getValue( "box", "1efFt" ) : 一 台 
var yY = CssTnfFo.getVa1ue( "box", "top" ) : 一 略 
Yar w = ossSTnfo.getVa1ue ( "box" , "width" ) : 一 話 
var h = ossTnfFo.getVa1ue( "box" , "height" ) : 一 医 
documen . getE1ementByTqd ("resu1" ) .1nnerHTMTL」 = 電 。 
"座標 ("+x+","+y+" ) で 大 き さ は ["+w+","+h+" ] で す " : * プ 
} 
} 
Ya CS8TnfFo = 【 
getVa1lue : function (tagTD, propName ) { 
Yar divBox = document .getE1emenEtByTd (tagTD) : 
ifF (document .defau1EtView ) {【 
Var boxCSS = gy 
document .deFau1tView . detComputedSty1e (divBox, nu11): = 
eurmn boxCSS . et 上 ProperEyVa1ue (propName) : 
} 
if (divBox . CurrentSty1e) { 
eturn evaerrrmenreerereepAeeripeteteramtaee | 
} 


に 


…ID 名 が 「box」 の スタ イル シー ト プ ロ パテ ィ で ある 「left」 の 値 を 求め る 

…ID 名 が 「box」 の スタ イル シー ト プ ロ パテ ィ で ある 「top」 の 値 を 求め る 

…|D 名 が 「box」 の スタ イル シー ト プ ロ パテ ィ で ある 「width」 の 値 を 求め る 

…ID 名 が 「box」 の スタ イル シー ト プ ロ パテ ィ で ある 「height」 の 値 を 求め る 

… 指 定 さ れ た プロ パテ ィ 名 の 値 を 取得 し 返す (Internet Explorer 以 外 の ブラ ウザ ) 
…: 指 定 さ れ た プロ パテ ィ 名 の 値 を 取得 し 返す (Internet Explorer 以 外 の 場合 ) 





'@ 項 抽 回 上 スタ イル シー ト の 値 は 「getPropertyValue()」、「getAttribute()」 で 取得 する 


現在 の スタ イル シー ト の 値 を 読み 出す に は 、DOM に 対応 し た ブラ ウザ で あれ ば 「getPropertyValue 
(0」、Internet Explorer の 場合 は 「getAttribute()」 を 使っ て 取得 し ます 。 取得 で きる の は 、 実 際 に 表示 
され て いる 値 に な り ま す 。 た だ し 、 座 標 値 な ど は 必ず し も 数 値 を 返す わけ で は な く 、「auto」 な ど を 返す こ 


と も あり ます 。 ま た 数 値 の 場合 に は 単位 が 付い て くる た め 数 値 と し て 処理 し た い 場 合 に は 、「parselnt0」 
また は 「parseFloat()」 を 使っ て 変換 する 必要 が あり ます 。 








テー ご へ YY 目 /0 3 ヨ 1dVHO 










テー ざ ざ へ 必 叶 | 目 /0-3 ヨ 1dVHO 


228 








SDINN l CHAPTER-07 ぁ | logz 


スタ イル シー トク ラス を 
0 ルク うれ 言え る 





ここ で は 、 タ グ に スタ イル シー トク ラス が 1 つ だ け 設 定 さ れ て いる 場合 に クラ ス を 入れ 替え る 処理 に つい て 
解説 し ます 。 









|@ c:avascrpt-sar <| | x 用 uive search の ・ 





・ き ペー ジ (の マー 












9 asoptampe 因 PP 





















ーー ニー ニーー ニ ーーー 


or お ・| 





| 総 C:JavaScript な サ | X 上 Uive Search 


ーー 











本 日 は 晴天 な り 





ボタン を クウ リッ ク す る と スタ イル シー ト が 切り 替わり ます 。 





クラ ス を mormal に 変更 
クラ ス を caution に 変更 ト 


本 日 は 晴天 な り 











| ヤン ピ ユ ー タ | 名 立 モ ー ド 






ボタ ン を クリ ッ ク す る と … 


ボッ クス の スタ イル シー ト 
クラ ス が 切り 替わる 





貞 コン ビ ピュータ | 保護 モー ド : 無効 





ReiWamge 当 目 用 用 馬 大 際 index.htm 


<!DOCTYPE htm1 PUBLITC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 
<meta h 上 上 Dー@Gqu1Y= "で COn ヒ Gen ヒ 上 ype" Conten ヒ =" モ ex 上 /htm1: 
CharSe ヒ =utF-8"> 5 
< ヒュ 上 1e>JavaSo エ ip Samp1e</ ヒ 1 上 1e> 
<1ink re1="sty1eshee 上 " ype="tex 上 /css" hrefF="main.csS" 
media="a11 "> 
く 8C エ 1D 上 上 yDe= "ex / Ja で a8C エ 1 わ 七 " 5S エ C="ma1nm . 8 "> く / SC エ 1p セ > 
</head> の 


<body> 


ボタ ン を クリ ッ ク す る と スタ イル シー ト が 切り 替わり ます 。 
<fForm action=" ./setoss .Cd1" method= "get" name="mainForm"> 


<1npu 七 type= "buEon" ふ 
<1npu 上 ype= "butEton" 


d= "SetButton1" ゞ a1ue=" ク ラス を norma1 に 変更 "> 
d= "setButton2" Ya1ue=" ク ラス を caution に 変更 "> 


norma] "> 本 日 は 晴天 な り < /d1 マ > 


</ Form> 
< く d1VY 1d=" エ reSu1t 上 " Cc1aSs8=" 
</body> 
</htm1> 
eemee 当 目 用 用 本 前 輝 main.jS 





windlow .on1oad = Funotion ( ) { 


document . getE1emenByTq ( "set 上 Button1" ) .onc1iok 


documen . getE1ementByTd ( 
} 


document . getE]1emenEByTqd ( " set 上 But て on2" ) . onc1iok 


documen .getE]ementByTGd ( 
} 
} 


Function ( ) { 
"norma1 " : 一 加 


中 中 


"reSu1 ヒ 上 " ) .c1assName 


=ー FumoEionm( ) { 
"reSu] モ ") .c1assName = "ocaution" : 一 凡 


頭 |D 名 が 「resultl」 の スタ イル シー トク ラス を 「normal」 に 設定 する 
許 |D 名 が 「resultl」 の スタ イル シー トク ラス を 「caution」 に 設定 する 


(@ 損 抽 】 映 旧 スタ イル シー トク ラス は 「clasSName」 プ ロバ ティ に 設定 する 


タグ に 任意 の スタ イル シー トク ラス を 設定 する に は 、「className」 プ ロ パ ティ に 適用 し た い ク ラス 名 を 
指定 し ます 。 スタ イル シー トク ラス 名 の 指定 は 、 半 角 空 白 で 区 切っ て 列記 する こと で 複数 の スタ イル を 一 括 
し て 設定 する こと も で きま す 。 スタ イル シー トク ラス が 複数 設定 され て お り 、 任 意 の クラ ス だ け を 入れ 替え 


る 場合 に は 、G つ 30 ペ ー ジ を 参照 し こく だ さい 。 な お 、 古 い ブ ラウ ザ で は スタ イル シー トク ラス 名 を 半角 空白 
で 区 切っ て 複数 指定 する こと は で き な い の で 注意 し て くだ さい 。 
指定 され て いる スタ イル シー ト の クラ ス 名 を 配列 と し て 抽出 し て 調べ た い 場 合 に は 、 次 の よう splitO」 





を 使い ます 。 複数 クラ ス が 指定 され て いる 場合 は 、 半 角 空 白 で 区 切ら れ て いる の で 「split 0」 の パラ メー タ 


に は 「" "」 と し て 半角 空白 を 指定 し ます 。 


Var CSS = document .getE1ementByTqd ( "resu1 モ 上" ) .c1assName . Sp11 モ (" 『"): 


単純 に 特定 の クラ ス が 適用 され て いる か 


Va CB = 


どう か は 、「indexOf(O)」 ま た は 「lastIndexOf(」 を 使い ます 。 


命 


document . getE1ementByTqd ( "resu1t" ) .c1assName . indexOF ( "import") ーー 


先頭 が 「mz」 で 始ま る クラ ス 名 だ け を 抽 





Va CSS ニニ 


H し た い 場 合 に は 、 正 規 表現 (match) を 使い ます 。 


⑱、 
\ 


document . getE1ementByTdq ( "resu1 モ " ) .c1assName .maoh ( /mz/9) : +* ご 











テナー ご さ 必 上 /0-3 コ ldYHO 





テー で へ 必 目 /0-3 ヨ 1dVHO 





| |CHAprERoZkl oos 


098 複数 の クラ ス が 指定 され て いる 場合 に 
スタ イル シー トク ラス を 入れ 替え る 





ここ で は 、 タ グ に スタ イル シー トク ラス が 複数 設定 され て いる 場合 に 、 特 定 の クラ ス だ け を 入れ 替え る 処理 
に つい て 解説 し ます 。 











〇 の: |@ csserprsar ・ ヶ |x Live Search の ・ 


3 |@Jweswptsampe | | 代 ・ 還 ・ PTP 



















ポタ ン を ウリ ッ ク す る と 特定 の スタ イル シー トク ラス の み 切 り 替 わり ます 。 


クラ ス を normal に 変更 


ここ の エリ ア の 背景 色 と 文字 色 が 
変わ り ま す 。 
し か し 文字 サイ ズ は 変わ り ま せん 。 


ボタ ン を クリ ッ ク す る と … 











ee… に ーーo > 
ーーーーーーー | | 久 ・ 回 ・ 加 ・ は cz ・ 


ボタン を クリ ッ ク す る と 特定 の スタ イル シー トク ラス の み 切 り 替 わり ます 。 


クラ ス を caution に 変更 ] 


『 コン ピュー タ | 保護 モー ド : | 



































ここ の エリ ア の 背景 色 と 文字 色 が 
ボッ クス の 特定 の スタ イル シー ト 変わ り ま す 。 
クラ ス だ けが 切り 替わる し か し 文字 サイ ズ は 変わ り ま せん 。 














商 コン ピュ ー タ | 保護 モー ド : 無効 


ReWXg 事 9 の 当 目 用 目 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1] > 


<head> ひ の 


<me ヒ ah 上 上 りーG 可 u1 マ = "で COn ヒ en ヒー 上 ype" Conten ヒ ="EexE/htm1: = 
CharSe ヒ =uF-8 "> 9 
< ヒュ 1 七 1e> け aaSCr1p 上 Samp1e</ ヒ 1 上 ]@ ら > 
<1ink re1="styleshee 上 " type="Eex モ /css" hrefF="main.Css" @、 
med1ia="a11 "> トー 
で ぐ SC エ 1Dp 上 上 ype= "上 @Gx 七 / ゴ み VaSC エ ユエ D 七 " S エ C= "ma1inm .]S "></ SC エ 1Dp セ > 
</head> 
< く DodY> 
ボタ ン を クリ ッ ク す る と 特定 の スタ イル シー トク ラス の み 切 り 替わり ます 。 
<fForm aoion=" ./setcssS .C9g1" method= "ge 上 " name= "matinForm"> 
<1npu 上 type= "buEton" 1d= "SetBuEton1" Ya1ue=" ク ラス を norma1 に 変更 "> 
<1npu 七 上 ype= "buEon" 1d="SeBut て on2" Ya1ue= "クラ ス を caution に 変更 "> 
</ Form> 
<d1V 1d="reSu]t 上 " oc]1ass="oomon norma1 "> 
ここ の エリ ア の 背景 色 と 文字 色 が 変わ D り ます 。 < わ エ > 
し か し 文字 サイ ズ は 変わ り ま せん 。 
く /d ュ 1 マ > 
</body> 
</htm1> 


還 旧 上 用 本 ER 交 mainjs 


window .on1oad = funoction ( ) { 

document . detE1 ementByTqd ( "set 上 Bu モ て on1 " ) .onc1ick = Funotion( ) { 
Yar QivBox = document .getE1ementByTqd ( "resu1" ) : 
divBox .c1assName = っ 田 
divBox .c1assName . rep1ace( /caution/d, "norma1") 

} 

document . getE1ementByTq ( "set 上 Bu て on2" ) .onc1ick = Funotion( ) 【 
Var divBox = qoocumen .getE1ementByTdq ( "resu1t" ) : 
divBox .c1assName = っ 還 
divBox .c1assName .rep1ace ( /norma1/g, "ocaution") ーー 





頭 |D 名 が 「resultl」 の スタ イル シー トク ラス に 含ま れる 「caution]」 ク ラス だ け を 「normal」 に 設定 する 
用 |D 名 が 「result」 の スタ イル シー トク ラス に 含ま れる 「normall」 ク ラス だ け を 「caution」 に 設定 する 


(@7】 軸 上 複数 指定 され て いる 場合 は 正規 表現 を 使っ て スタ イル シー トク ラス を 置換 する 
スタ イル シー トク ラス が 複数 指定 され て いる 場合 に 、 特 定 の クラ ス だ け を 入れ 替え る に は 、 正 規 表現 を 
利用 し て 置換 を 行う 「replace()」 を 使い ます 。 現在 、 設 定 さ れ て いる スタ イル シー トク ラス を 読み 出し 、 特 
定 の クラ ス だ け を 置換 し た 後に 、 再 度 「clasSName」 プ ロ パ ティ に 代入 する こと で 特定 の クラ ス 名 だ け を 








入れ 替え る こと が で きま す 。 








テー ご へ 必 >| 目 /0 -4 ヨ IdYHO 











テー で へ いひ | 眼 /0 1dVHO 





画像 や エレ メン ト の 
表示 / 非 表示 を 切り 替え る 


ここ で は 、 画 像 や エレ メン ト な ど ブ ラウ ザ 上 に 表示 され て いる オブ ジェ クト の 表示 / 非 表示 を 指定 する 方 法 に 
つい て 解説 し ます 。 














全 *=R- ・ 剖 ・ =Ey ペ ー テ の ) > ら | 









ボタ ン を クリ ッ ク す る と … 





ae せん 。 
















「] コン ピュ ー タ | 保護 モー ド : 








ボッ クス の 表示 / 非 表示 
が 切り 替わる 














末 コン ピュ ユー タ | 保護 モー ド : 無効 8 


還 目 用 由 誠 際 index.htm 


< く !DOCTYPE htm1] PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1] / /EN"> 


< く htm] > 
<head> の 


SeWIXql 事 ep 





<mea h ヒ 上 わ ーG ら du ユマ = "で On モ @en セ モー ト Eye" ConEen セ ="Eex モ /htm1: = 
で harSeG ヒ =uF-8"> * 
< モ ヒ ュ 上 1e>JaVaScC て ip 上 Samp1e</ ヒ 1 上 1e> 
<1ink re1="styleshee" type="ex 七 /css" hrefF="main.cCss" sv 
med1ia="a11" 1d="osSMa1n"> ゃ "" 
< く 8C エ ip 上 上 ype= "上 Gx 七 / る VaSC エ 1D 上 " SC= "ma1n . 8 "></ SC エエ ユヒ > 
</head> 
< くわ od ツ > 
<h1 > 更新 情報 </h1> 
<Form action=" ./setoss .Cg1" method= "get" name="matinForm"> 
<1npu type= "button" 1d=" setButton1" ya1ue=" 表 示す る "> 
<1npu 七 上 ype= "buton" 1d="setButton2" Ya1ue=" 表 示し な い "> 
</ Form> 
<QdiV 1d="1nmFo"> 
<1m9 Sro="1mages/mark .d1F" wi1dth="32" heigh 上 ="33" a1 モ =" 注 意 "> 
本 日 の 更新 は 特に あり ませ ん 。 
く /d ュ > 
</ body> 
</html > 


Realseg ョ 当 目 用 用 本 WE main.js 


window.on1oad = fFunotion( ) { 
document . getE1ementByTd ( " setButEon1 " ) .onc1iock = Funotion( ) { 
documen . getE1ementByTd ("info" ) .sty1e. ゞ isibi1ity = "visib1e" : 一 馴 
} 
document . getE1ementByTd ( "set 上 But て on2" ) .onc1iok = fFunotion( ) 【 
document . getE1ementByTd ( "info" ) . St 上 y1e . ゞ 1sibi1ity = "hidden" : 一 話 
} 





豆 |D 名 が 「infoj」 の スタ イル を 表示 (visible) に 設定 する 
許 |D 名 が 「infol」 の スタ イル を 非 表 示 (hidden) に 設定 する 


@jjf】 映 上 スタ イル シー ト の 「visibility」 プ ロバ ティ で 表示 / 非 表示 の 設定 を 行う 


ブラ ウザ 上 に 表示 され て いる 画像 や テキ スト 、 エ レ メ ン ト な どの 表示 、 非 表示 を 行う に は スタ イル シー ト 
の 「visibility」 プ ロ パ ティ を 操作 し ます 。 この 「visibility」 プ ロ パ ティ に 文字 列 と し て 「visible」 を 指定 する 


と 表示 され 、「hidden]」 を 指定 する と 表示 され な く な り ま す 。 「visibility」 プ ロ パ ティ で 「hidden] を 設定 す 
る と 単純 に 、 そ の エレ メン ト の 領域 が 表示 され な く な り ま す 。 単純 に 領域 が 非 表示 に な る の で は な く 、 以 後 
に 続く 内 容 を 詰め た い 場 合 に は 8234 ペー ジ で 説明 する 「display」 プ ロ パ ティ を 操作 し ます 。 








テー ぴざ へ AI 目 /0 - ヨ ldVHO 






テナー ご へ >! 上 /0 3 ヨ 1dYHO 








中 」 


SENGSIIG の NN ド 較 CHAPTER0Z | 」ioo] 


クリ ッ ク で 内 容 を 放 義 し て 
ー ジ 内 容 を 押し 下げ る 


























ここ で は 、 エ レ メ ン ト の 領域 を 展開 し て 内 容 を 押し 下げ る 、 ま た は 内 容 を 詰め る 方 法 に つい て 解説 し ます 。 











< |@ C:\JavaScript-Sarr ・| 52 】 | X | | Live Search お < | 
っ > 





次 裕 | 欠 waseptsempe | | 信 ・ 団 ・ 悪 て 可 ペ ー ジ ウマ 

























フォ ト る ラリ 本 | @ cwsvesrprsar ・| ヶ | x uive search 


写真 1[ 不 営め 大 桶 ] 芝 < | 給 wasoptsampe | | 名 ・ 回 ・ー・ は ペー ジ の マー 
L ー L 








写 真 [和広 ] = フォ ト ギ ャ ラリ 








写真 1[ 木 冒 の 大 本 ] 









曽 コン ピュ ー タ | 保護 モー ド : 













リン ク を クリ ッ ク 写真 が 表示 され 8 
する と … 以後 の 内 容 が 下 
に 押し 下げ られ る 


eemeeg 当 目 用 用 男 誠 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta h ヒ 上 上 わ -@eGqu1 マ = "COn ヒ en ヒ - 上 ype" Conten ヒ =" モ ex 上 /htm] : 
CharSeG キ =u 上 F-8"> 
< モ 上 1 上 1e>JavaSor1p 上 Samp1e</ ヒ ュ ヒ 1]e> 
<1ink re]1="styleshee" type="Eext/css" hrefF="main.Css" 
media="a11" 1d="ossMain "> 
< く 8C エ 1p ヒ 上 上 ype= " 七 @xx / ]a び aSC エ 1D ヒ "8 エ C= "ma1m .]S "></ SC エ ュ 1Dp ヒ > 
</head> 
<Dbody> 
<h1> フ ォ ト ギャ ラリ ー</h1> 
<d1 1d= "photoA1bum "> 
<d1iY cass= "photo"> 
<a hrefF="1mages/DSC0001 . pg "> 写真 1 [木曽 の 大 橋 ]</a><b エ > 
<1mg Sro="1mages/DSC0001 .jpg" width="240" height="135"> 


く /d ュ マッ > の 





二 コン ビュ ー タ | 保護 モー ド : 無効 








) 


<d ュ で cass= "pho モ o"> 
<a hrefF="images/DSC0002 .]pg "> 写真 2[ 諏 訪 湖 花火 ]</ a>< わ ェ > 
<1mg Sro="1mages/DSC0002 . pg" Width="240" heigh モ ="135"> 
</d1 マ > 
<d ュ 1 Cass= "photo"> 
<a hreF="1images/DSC0003 . pg "> 写真 3[ 高 原 ]</a><b エ > 
<1mg Src="1mages/DSC0003 .]pg" width="240" heigh="135"> 
</d1 ざ > 
</d1 マ > 
</body> 
</htm1> 


ReXe ヨ eeg 当 目 用 用 馬 R 二 交 参 main.js 


wi1ndow.on1oad = fFunotion( ) { 





Var 1inkTag = @、 
1 ae ・9etE] ementBy エ Td ( "photoA1bum" ) .getE1ementsByTagName("a") :』 ン 
For (Var 1=0: 1<1inkTag.1ength: ュ ++) {一 上 
1inkTag [1] .onc1iok = fFunotion( ) { 一 医 
Yar ptr = this.nextSib1 ing: 一 旋 


whi1e( (ptr.nodeType != 1) | | (ptr.tagName .EoLowerCase() != 
"1mg" ) ) { コ 
ptr = ptr.nexS1b1 ing: 


} 

させ (ptr.style.ditsp1ay == "") ptr.8Ey1e.disp1Lay = "bl1ook": Im 
el1se ptr.sty1e.disp1ay = "": ご 
eturn Fa]1se: 


こつ 


"ID 名 が 「photoAIDum」 の オブ ジェ クト 内 に ある <a> タ グ の 一 覧 を 取得 する 

… 取 得 し た <a> タ グ の 数 だ け 繰 り 返 す 

・<a> タ グ に 「onclick」 イ ベン ト を 設定 する 

…<a> タ グ の 次 の ノー ド を 変数 「ptrl に 入れ る 

… 変 数 「ptr」 で 示さ れる ノー ド が <img> タ グ で な い 場 合 に は 空白 を 示し て いる た め 、 次 の ノー ド を 変数 「ptr」 に 入れ る 

… ブ ー ド は <img> タ グ を 示す た め ス タイ ル シ ー ト の 「display」 プ ロ パ ティ を 調べ 表示 され て いた ら 「"」、 そ う で な い 場 合 
は 「"block"」 を 設定 する 





回 回 回 回 回 回 


(@⑯ 損 抽 ) 昌 上 スタ イル シー ト の 「display」 プ ロバ ティ で 内 容 の 展開 / 折 り た た み を 行う 
スタ イル シー ト の [Visibility」 プ ロ パ ティ で は 単純 に エレ メン ト の 表示 / 非 表示 が 行わ れる だ け で す が 、 
[display」 プ ロ パ ティ を 使え ば 、 以 後に 続く 内 容 を 押し 下げ た り 詰め た りす る こと が で きま す 。 
「display」 プ ロ パ ティ に 「block」 を 指定 する と 内 容 が (ブロ ッ ク レ ベル 要素 と し て ) 表 示さ れ ま す 。 逆 に 内 











容 を 詰め た い 場 合 に は 「none] で は な く 、「"」 を 指定 し ます 。 





テナー ご さぶ >! 眼 /0 -3 ヨ 1dYHO 













elfeNt 較 昌 | 
101 誠 (タン クリ ッ ク で CSS フ ァイル を 
切り 替え る 


ここ で は 、<link> タ グ で 読み 込ま れ た スタ イル シー ト フ ァイル を 切り 替え る 方 法 に つい て 解説 し ます 。 








ボタ ン を クリ ッ ク す る と … 





ここ に も スタ イル シー ト が 設定 され て いま す 。 





部 コン ピュ ー タ | 保護 モー ド : 無 






人 


テナー ご へ ぶ >J 上 /0-331dVHO 邊 目 目 目 目 目 上 有 目 上 目 目 上 








指定 し た スタ イル シー ト 
ファ イル が 読み 込ま れ 、 ス 
タイ ル 表 示 が 切り 替わる 









還 量 ここ に も スタ イル シー ト が 設定 され て いま す 。 








商 コン ビュ ユー タ | 保護 モー ド : 無効 










当 目 有用 馬 唐 陸 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transi1ona] / / EN"> 
<htm1> 


<head> の 


<me ヒ a h ヒ わ ー@qu1 マ = "で COn ヒ en ヒー-Eype" conten ヒ ="EexE/htm1: 
CharSe ヒ =u 革 -ー8"> 4 
< モ ュ 1E1e>JavaSor1p Samp1e</ ヒ 1 上 1e> 
<1ink re]="sty1Teshee" type= "ext/css" hrefF="main.css" に 
med1ia="a11" 1d="CsSMain"> を 
く 8C エ 1DpE ype= "上 Gx / る VaSC エ 1 エ D 上 " S エ C="ma1m .S "></ SC エエ D ヒ > 
</head> 
< く Dbod ツ > 
ボタ ン を クリ ッ ク す る と スタ イル シー ト が 切り 替わり ます 。 
<Form action=" ./setoss .Cgi" method= "det 上 " name="mainForm"> 
<1npu 七 上 ype= "butEton" 1d="setButon1" val1ue= "main .css に 切替 え ">< わ ェ > 
く 1npu tyDpe= "Duon" 1d="seButton2" 
Ya1ue= "main2 .css に 切替 え ">< セ も > as 
</ Form> 
<d1iY 1d="box1 "> ここ に も スタ イル シー ト が 設定 され て いま す 。 </d ュ > 
</body> 
</htm1> 





国 目 有用 本 SR 靖 mainjs 


window.on1oad = funotion( ) { 
document .getE1emenEByTd ( "set 上 BuEon1" ) .onc1iock = Funotion( ) 【 





@@) り ) 


document . getE1emenEtByTqd( "cssMain" ) .hreF = "main.css" : 一 斑 
} 
document . getE]1emenEtByTqd ( "setButEon2" ) .onc1iock = Funotion( ) { 
document . getE1emenEtByTq ("cssMain" ) .hreF = "main2.css": 一 許 


} 
5 


頭 名 が 「cssMain」 の <link> タ グ の URL を 「main.css」 に 設定 する 
話 |D 名 が 「cssMain」 の <link> の URL を 「main2.css」 に 設定 する 


@ 損 3 人 】 遇 個 <ink> タ グ の [hrefl 属 性 に スタ イル シー ト フ ァイル の UHL を 指定 する 


スタ イル シー ト フ ァイル を 切り 替え る に は 、<link> タ グ の 「hrefl 属 性 に 新しく 設定 する スタ イル シー ト フ 
ァイル の URL を 設定 し ます 。 <link> タ グ が 複数 ある 場合 に は 、 個 別 の ID 名 を 割り 当て て お く か 、 
「document.getElementsByTagName("link")」 と し て 配列 で 参照 し 設定 を 行う こと が で きま す 。 


( 人 [jil DDOCTYPE に よっ て 結果 が 異な る 


Internet Explorer で は 、DOCTYPE に よっ て 「height」 プ ロ パ ティ な ど 読 み 出さ れる 結果 が 異な る こと 
が あり ます 。 この 問題 は 、HTML 4 Transitional が 指定 され て いる 場合 に 発生 し ます 。 HTML 4 Strict 
や XHTML で は 発生 し ませ ん 。 この DOCTYPE に よる 不具 合 は 、prototype.jS と script.aculO.us の 組み 
合わ せ や 、Adobe Spry な ど で も 発生 する た め 制 作 時 に は 注意 が 必要 で す 。 





テー へ 必 自 /0 - ヨ 1dYHO 








eaakeN 間 用 (し CHkrreoz [jioz] 


時 間 帯 別に CSS フ ァイル を 
lo 

















































テー へ 必 目 /0-3 コ 14YHO 





















ペー ジ が 読み 込ま れる と 、 
時 間 帯 別に 異な る スタ イ 
ル シ ー ト ファ イル が 適用 
され る 








理 な | 保 馬 モー ド : 無効 





SD@79I@ 事 る @) ゆ 


国 目 用 由 机 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Trans1iona1 / /EN"> 
<htm1] > 


<head> 
<me ヒ a h ヒ 上 p-equ1 マ = "ConEen ヒ -type" ConEen モ = "上 ex モ /htm1: 
で harSe キ =utF-8"> + ォ ご 


< ヒュ 上 1e> 了 JaVaSC エ ip 上 Samp1e</ 上 1 上 1@> 
<1ink re]="styleshee" type="text/css" hreF="main.Css" ww 
media="a11 "> を 
<1ink re1="styl1eshee" type= "ex 上 /oss" *、 
hrefF="time0.css" media="a11" Gb とう 
<8C エ 1p 上 上 ype= " ヒ @x / ]a マ aSC エ 1p ヒ "8 エ C= "matn .]S "></ SC エ ュ ロキ > 

</heaqd> 

<body テ > 
<h1> よ うこ そ </h1> 
<d ュ 1 1d="box "> ゆっ くり し て いっ て くだ さい 。 </ di マッ 

</body> 

</htm1> 


豆 探 作 する <link> タ グ に ID 名 を 指定 する 


当 目 用 用 本 ER mainjs 


window.on1oad = fFunction( ) { 
var cssF1tle = document .getE1emenEtByTd ( "timeCS8" ) : 一 駐 
var qateOb] = new Date() : 一 峰 
var h = qateOb] . getHours ( ) : 一 回 
csSF11e.hrefF = "oss/ モ 1me"+h+" CSS": 一 回 





に 


"ID 名 が 「timeCSS」 の エレ メン ト (<Iink> タ グ ) を 指定 する 

付 オ ブ ジ ェクト を 生成 する 

… 時 間 を 読み 出す (読み 出し た 時 間 は 24 時 間 制 に な る た め 0 一 53 の 値 に な る ) 

… ス タイ ル シ ー ト ファ イル の 名 前 と 時 間 を 連結 し た スタ イル シー ト フ ァイル を 読み 込ま せる 




















回 回 回 回 


@ 加 9) 回 衣 スタ イル シー ト フ ァイル 名 を 工夫 し て 時 間 を 示す 値 を 追加 し て お く 


読み 込む スタ イル シー ト フ ァイル を 時 間 帯 別に 切り 替え る に は 、<link> タ グ に ID 名 を 指定 し て お きま す 。 
次 に 読み 込む スタ イル シー ト フ ァイル 名 に 工夫 を し て お きま す 。 サン プル で は 、「time」 と 時 間 を 示す 値 の 


組み 合わ せ に し て あり ます 。 た と えば 、6 時 で あれ ば [time6.css」、52 時 で あれ ば [time22.csS」 と いう 
ファ イル 名 に な り ま す (24 時 間 分 用 意 し て お く )。 この ファ イル 名 (URL) を <link> タ グ の 「hrefl 属 性 に 設 
定 す る こと で 時 間 帯 別に 異な る スタ イル シー ト を 適用 する こと が で きま す 。 








テー で へ 上 /0 dldVHO 























9E EEIECD 人 NN 旨 [ICHAPrER0Z [jies] 


中 0 民有 スタ イル シー ト を 無効 に する 





| 上 /0-d ヨ 1dVHO 


カー 
Ss 


テナー 





ここ で は 、 ス タイ ル シ ー ト を 無効 に する 方 法 に つい て 解説 し ます 。 


















(つの: | @ CavaScrpt-San | x ue KR pg ・| 


補 | @ vasenpt sample 賠 倫 ・ 還 ・ 提 ・ 叶 ペー ジ の マー 





> 





ボタ ノン を クリ ッ ク す る と 、 スタ イル シー ト の 有効 無効 を 切り 替え る こと が で きま す 。 










main.css を 無効 ボタ ン を クリ ッ ク す る と … 
main.cs5 を 有効 
sub.css を 無効 


sub.css を 有効 











ここ は mam_css で スタ イル が 定 二 さ れ て いま す 。 
















の る ・| 





銀 CavaSorpt-San ・| ヶ | X | le sra 


GO・| 


宣 次 | 欠 Javasonpt sampe | | 食 ・ 回 ・ 赴 ・ 還 ペー ジ (@ マ ー 








末 コ ンピュータ | 保護 モー ド : 無効 











Clog クリ ッ ク す る と 、 スタ イル シー ト の 有効 無効 を 切り 替え る こと が で 


スタ イル シー ト の 有効 / 無 効 を 


切り 替え る こと が で きる ここ は mam css で スタ イル が 定義 され て いま す 。 








商 コン ピュ ー タ | 保護 モー ド : 無効 








ReWXg 事 eg り 当 目 用 目 index.htm 


<!DOCTYPE htm1] PUBLTC "-//W3C//DTD HTML. 4.01 Transitiona1 / /EN"> 
<htm1l > 
<head> 
<meta h ヒ D-equ1 マ = "ConEen ヒ -t 上 ype" ConEen キ = "上 ex 七 /htm] : 
Cha エ SG ヒ =u 上 fF-8"> 
< ヒュ 1E1e>JavaScr1p 上 Samp1e</ ヒ ュ ヒ 1e> 
<1inlk re1="sty1eshee" yDpe="Eex 上 /cCss" hreF="main.CSS" の 
media="a11" 1d="ossMain"> 


<11nk re1="sty1eshee ヒ " Etype="EexE/oss" hreF="sub.cCsgs" 
media="a11" 1qd="ossSub"> 
< く SC エ 1p ヒ 上 ype= "ヒヒ / aVaSC エ 1p 上 "Src="main .S "></ SC エエ わ ヒ > 
</head> 
<bod ツ > 
ボタ ン を クリ ッ ク す る と 、 ス タイ ル シ ー ト の 有効 / 無 効 を 切り 替え る こと が で きま す 。 
<Form ac 上 ion=" ./setoss .Cdg1" method= "det 上" name="matinForm"> 
<1npu 七 上 ype= "buE 上 on" 1d= "SeBut て on1" ya1ue="main .CsS を 無効 ">< わ ェ > 
<1nmpu 上 上 ype= "bu ヒ Eton" 1d=" seButon2" ya1ue= "main .css を 有効 "><b ェ > 
< く 1npu ヒ 上 ype= "but 上 Eon" 1d= "seBu ヒ モ ton3" Ya1ue=" sub . Cs8 を 無効 ">< わ ェ > 
< く 1npu ヒ 上 ype= "buEon" 1d="Se 上 Bu て on4" Ya]1ue=" Sub . Cs8 を 有効 ">< わ ェ > 
</ Form> 
<d1V 1d="box1 "> ここ は main . csS で スタ イル が 定義 され て いま す 。 < /d1 マ > 
<d1iV 1d="box2 "> ここ は sub . css で スタ イル が 定義 され て いま す 。 < /d1 マ > 
</body> 


</htm1> 





いら 19I@ 玉 9 


国 旧 上 用 EER 開 交 あ mainjs 


window.on1oad = fFunotion ( ) { 


トー 


加 
回 
加 


@ 損 所 】 映 租 「disabled」 プ ロバ ティ で 有効 / 無 効 を 指定 する 


読み 込ま れ た スタ イル シー ト フ ァイル を 有効 に し た り 、 無 効 に し た りす る 場合 は 「disabled] プ ロ パ ティ を 
操作 し ます 。 「disabled」 プ ロ パ ティ に 「true」 を 設定 する と 、 ス タイ ル シ ー ト は 無効 に な り ま す 。 「false」 を 


ミロ 
に b:4 


document .getE1ementByTd ( "setButton1 " ) .onc1ick = funoction( ) { 
document . getE1emenEByT エ Td ("cssMain" ) .disab1ed = true: 一 罰 

} 

document . getE1ementByTqd ( "SetEButton2" ) .onc1iok = Funoction( ) { 
document . getE1ementByTq ("cssMain" ) .disab1ed = False: 一 凡 

} 

document . getE1ementByTqd ( " setBut て on3" ) .onc1iock = fFunotion( ) { 
document . getE1emenEByTdqd ("cssSub" ) .disab1ed = rue: 一 医 

} 

document . getE1ementByTd ( " set 上 But て on4" ) .onc1iock = fFunotion( ) { 
document . getE1emenEBy エ Td ("cssSub" ) .disab1ed = fFa]se: 一 回 

} 


…|D 名 「cssMain]」 の エレ メン ト の スタ イル シー ト を 無効 に する 
…ID 名 「cssMain]」 の エレ メン ト の スタ イル シー ト を 有効 に する 
…ID 名 「cSsSub]」 の エレ メン ト の スタ イル シー ト を 無効 に する 
…ID 名 「csSSub]」 の エレ メン ト の スタ イル シー ト を 有効 に する 


定 す る と スタ イル シー ト は 有効 に な り ま す 。 











テナー ご へ 必 X 眼 /0 -3 ヨ IdYHO 


テナー ご へ 必 X 上 /0-3 コ 1dYHO 








242 


Orrrrsrm 


ロー カル 変数 の スコ ー プ 


JavaScript の ロー カル 変数 は 、 関 数 内 で の み 有 効 で す 。 他 の 言語 で は ブロ ッ ク 内 で の み 変 数 が 有 
効 と な る こと が 多い の で す が 、JavaScript で は 関数 内 全体 に 変数 の 影響 が 及 ん で し まい ます 。 
Firefox ら な ど で は 「let」 に より ブロ ッ ク 内 の み 有 効 と する こと が で きま す が 、 他 の ブラ ウザ で は サポ ー 


ト さ れ て いな いた め 、 別 の 方 法 を 使用 する こと に な り ま す 。 


関数 内 で 変数 の 影響 が あめ る わけ で すか ら 、 次 の サン プル の よう に 無名 関数 / 匿 名 関数 で くく っ て し ま 


えば 、 あ る 程度 まで は 問題 を 解決 する こと が で きま す 。 


Funotion es1 ( ) { 


va と m = 0, エエ = 999: 
For (Var 1=0: 1 ユ <10: 1 ユ ++) { /* 処理 */ } 
a1er (1) : 


} 
Function tes 七 2 ( ) { 
Var n=0, 1=999: 
(function () { 
For (Var 1=0: 1<10: ユ ++) { /※* 処理 ※/ } 
} ) 
a1er 上 (1 ) : 
} 
tes1 () : 
tes 七 2 () : 


上 記 の サン プル を 実行 する と 、 次 の よう に アラ ー ト が ら 回 、 表 示さ れ ま す 。 最初 の アラ ー ト は 関数 
「test1 ()」 の 実行 結果 、2 番 目 の ア ラー ト は 関数 「test2()」 の 実行 結果 に な り ま す 。 「test1 ()」 で は 
変数 i」 に 999 代 入 し て いま す が 、「for 命 令 で も 変数 [i」 を 利用 し て いる た め 、 最 終 的 な 変数 [i」 の 値 
は 「10」 に な り ま す 。 一 方 、「test2()」 で は 、「for」 命 令 を 無名 関数 で くく っ て いる た め 、 変 数 「i] の 値 は 
「999」 と 表示 され ます 。 











ーー デーーーーーーーーーーーーーー 一 = 









CHAPTER- 08 








Sa いき 基 園 人 @ 吸 に l CHAPTER08 | 」io4 
10 4 敵 イベ ント の 発生 し た タイ ミン グ で イベ ント 














ブ ジ ェクト か ら 情 報 を 取得 する 
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ここ で は 、 イ ベン ト 発 生 時 に イベ ント オブ ジェ クト か ら 情 報 を 取得 し て 、 ペ ー ジ 上 に 表示 する 方 法 に つい て 解 














2 meeesn -|>| >| eses 


| | 信 ・ 加 ・ 電 ・ ・a-z0 = 








宮 < | @Jmascrptsampe 
















ボタ ン を クウ リッ ク す る と 、 クリ ッ ク し た 座標 と オブ ジェ クト の ID が 表示 され ます 。 


上 


hsess ーー 
heckButton 





井 コン ピュ ー タ | 保護 モー ド : 無効 












ボタ ン を クリ ッ ク す る と … 





クリ ッ ク し た 座標 値 と イベ 
ント が 発生 し た オブ ジェ 
クト の ID 名 が 表示 され る 



















凍 コン ピュ ー タ | 保護 モー ド : 無効 M 思 100% < 





SeiWNemwei 当 目 用 用 馬 誠 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta htp-equ1Y= "ConEen-type" conten ヒ ="Eex モ 上 /htm1: = 
CharSe=uF-8"> 
< 上 ュ 1 上 ]e>JavaScript Samp1e</ 七 1 上 1e> 
<1ink re]="sty1esheet" type="EexE/css" hreF="main.Css" = 
media="a11 "> 
く SC エ 1Dp 上 上 yDe=" 七 @x ヒ / Ja で aSC エ 1 わ 七 " Sro="matn . 8 "></ SC エ 1p ヒ > 
</head> 
<body> 
ボタ ン を クリ ッ ク す る と 、 ク リッ ク し た 座標 と オブ ジェ クト の TD が 表示 され ます 。 
<Form ac1on=" . /event . cgi" method= "ge" name="mainForm"> 
<1npu type="butEton" 1d="checkBuEon" ya1ue=" ク リック し て くだ さい "><b エ > 
< く / Form> 


<d1iV 1d="resu1 モ "> 結果 :</d ュ マ > 
< く /bod ア > 
</htm1 > 





eemseg ョ 当 目 用 用 本 本 前 輝 main.js 


window .on1oad = fFunotion ( ) { 
document . getE1ementByTdq ( "checkBu て ton" ) .onc1ick = Funotion (ev ) { 一 名 
ifF (!evt) {一 略 
documen . getE]1emenEByTd ( "resu]" ) .1nnerHTMT, = 
eVent .x +","+ GVen . ヤ + "< くわ エ >" : ]m 
document . getE] ementByTd ( "resu1 上 " ) . innerHTMT, += き 
event . sroE]emen .1d: 
})else{ 
document .getE1emenEByTdq ( "resu1 七 " ) . 1innerHTMT, = 須 ga 
GV .padeX +","+ GeV .pageY+ "<D エ >": レー 
document . getE] emenEByTd ( "resu1" ) . innerHTMT, += ev .arge .1d: 
} 


+ ン 


… イ ベン ト が 発生 する と イベ ント ハン ドラ に パラ メー タ と し て イベ ント オブ ジェ クト が 渡さ れる (Internet Explorer 以 外 ) 

… イ ベン ト ハ ンド ラ に イベ ント オブ ジェ クト が 渡さ れ た か どう か 調べ る (渡さ れ て いな けれ ば Internet Explorer、 渡 され 
て いれ ば Internet Explorer 以 外 の ブラ ウザ と する ) 

…Internet Explorer の 場合 は 「event」 オ ブ ジ ェクト に 情報 が 入っ て いる の で 「x」 プ ロ パ ティ と 「y」 プ ロ パ ティ か ら 座 標 値 
を 取り 出す 

…Firefox、Safari、Opera な ど で は イベ ント ハン ドラ に 渡さ れ た イベ ント オブ ジェ クト に 情報 が 入っ て いる の で 「pageX」 
プロ パテ ィ と 「pageY」 プ ロ パ ティ か ら 情 報 を 取り 出す 





(@⑲ 損 提 】 昌 上 nternet Explorer と それ 以外 で 異な る イベ ント の 扱い に 注意 する 


イベ ント オブ ジェ クト は 、Internet Explorer で は 「event」 オ ブ ジ ェクト 、 他 ブラ ウザ で は イベ ント ハンドラ 
に 渡さ れ ま す 。 「event」 オ ブ ジ ェクト 自体 は Safari の や Opera で も 存在 し 、Internet Explorer 同 様 に アク 
セス する こと が で きま す 。 た だ し 、Firefox で は 「event] オ ブ ジ ェクト で は な く 、 イ ベン ト ハ ンド ラ に イベ ント 
オブ ジェ クト を 渡す よう に な っ て ます 。 標準 的 な 仕様 に 合わ せる の で あれ ば Firefox に な り ま す が 、 ブ ラウ ザ 
ご と に 対応 が 異な る た め 、 サ ンプ ル の よう に イベ ント オブ ジェ クト の 有無 に 応じ て Internet Explorer と 他 





ブラ ウザ で 処理 を 分 ける 必要 が あり ます 。 

また 、 イ ベン ト オ ブ ジェ クト で 扱わ れる 各種 プロ パテ ィ に つい て も 互換 性 が ある プロ パテ ィ は 、 か な り 限 ら 
れる た め 、 扱 い に は 注意 が 必要 で す 。 特に イベ ント 発生 時 の 座標 値 に 関し て は ブラ ウザ ご と (Firefox、 
Safari2、Internet Explorer) に 異な る た め 注 意 が 必要 で す 。 
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105 イベ ント の 設定 と 解除 を 
ボタ ン 操 作 で 切り 替え る 
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ここ で は 、 ボ タン の クリ ッ ク に よっ て イベ ント の 設定 / 解 除 を 切り 替え る 方 法 に つい て 解説 し ます 。 









て CK | Comescersm -|>|x leeses pg -| 
| 人 @somkseme | | 合名 ・ 寺 ・ は ペー ウマ 


』 クリ ッ ク さ れ ま し た 








設定 


上 の ボタ ン か ら イ ベン ト を 解除 








| 
イベ ント が 設定 され て いる と き に 
一 番 上 の ボタ ン を クリ ッ ク す る と 


一 番 上 の ボタ ン に イベ ント を アラ ー ト が 表示 され る 
設定 / 解 除 す る こと が で きる 


Eeeee 要 目 用 用 馬 M 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta htp-equ1Y= "ConEen-type" conten ヒ =" て ex 上 /htm] : 
CharSe ヒ =uEF-8"> 
< 上 ュ 上 1e>JavaScrip 上 Samp1e</ ヒ 1 上 1e> 
<1ink re1="styleshee 上 " type="EexE/css" hrefF="main.css" 
media="a11 "> 
く 8C エ 1Dt yDpe=" ヒ ex / ]aVaSC エ 1 上 " 5S エ Co= "ma1n . 8 "></ SC エ 1p> 
</head> 
<Dbod ア > 
<fForm ac1on=" ./even .Cd1" method= "ge 上 " name="mainForm"> 
<1npu type="button" 1qd="oheockBu て on" Ya1ue= "ボタ ン "><b エ > 
<1npu type= "butEon" 1d="SetBut モ on" Ya1ue=" 上 の ボタ ン に イベ ント を 設定 "> 
<1npu 上 ype= "bu ヒ 上 Eon" 1d="cC1 エ Button" ゞ a1ue=" 上 の ボタ ン か ら イ ベン ト を 解除 "> 
< く / Form> 
</ body> 
</htm] > 















RelWIXesee 当 目 用 | 本 本 靖 main.js 


window .on1oad = fFunotion ( ) 
document . getE1ementByTdq ( " Set 上 BuEon" ) .onc1ick = Funotion( ) { 


myEVven . se( ) : 


} 
document . getE1ementByTd ( "C1rBuEon" ) .onc1ick = Funotion ( ) { の 


くう myEven .C]1ea エ ( ) : 
} 
} 
Yar myEVen = 【{ 
Se : Funoction( ) { 
Yar divOb] = document .getE1ementByT エ qd ( "checkBu 上 ton" ) : 
ifF (divOb] . addEventTL1i st 上 ener ) divOb] . adQdEventTLiStener =*。 」 
("c1ick" , myEven .message, fFa1gse): ーー 
1fF (divOb] . a ヒ tachEven ) d1VOb] . a 上 tachEven ) 
("onc1iok" , myEvenE .messad@) : 4 
} , 
cl1ear : Funotion( ) { 
Yar divOb] = qoocument .getE1ementByTd ("checkButon" ) : 
ifF (QivOb] . て emoveEventTLis 上 ener ) d1vOb] . remoVeEVen 上 TS 上 ene エ La lm 
("oc1iock" , myEvent .message, Fa18e) : を デ 
ifF (diyvOb] . detachEven ) divOb] . detachEven 二 =-。 「 回 
("onc1iok" , myEvent .messade) : 4 ご 
拉 。 
messagde : Funotion( ) { 
a1er ( "クリ ッ ク さ れ ま し た " ) : 
} 


トー 


… ク リッ クイ ベン ト を 追加 する (Internet Explorer 以 外 の 標準 仕様 に 対応 し た ブラ ウザ ) 

… ク リッ クイ ベン ト を 追加 する (Internet Explorer の 場合 ) 

… 設 定 し た クリ ッ ク イ ベン ト を 削除 する (Internet Explorer 以 外 の 標準 仕様 に 対応 し た ブラ ウザ ) 
… 設 定 し た クリ ッ ク イ ベン ト を 削除 する (Internet Explorer の 場合 ) 


(@ 頂 当 2 全 個 イベ ント を 追加 する に は 「addEventListener()」「attachEvent()」 を 使う 


JavaScript で は 、 旧 来 の 方 法 で イベ ント を 設定 する 方 法 と 、DOM(Level ら 6) で の イベ ント を 設定 する 
方 法 が あり ます 。 旧来 の 方 法 で は 「 オ ブ ジ ェクト 名 . イ ベン ト 名 = イベ ント ハン ドラ 」 と し て イベ ント 発生 時 の 処 
理 を 指定 し ます 。 この 方 法 で は 開発 者 が 複数 いる 場合 や 複数 の ライ ブラ リ を 使用 し た 場合 、 後 か ら 指定 し 
た イベ ント で 上 書き され て し まい 、 そ れ 以 前 に 設定 され て いた イベ ント ハン ドラ は 消さ れ て し まっ て 実行 さ 
れ な く な っ て し まい ます 。 

これ に 対し て DOM で の イベ ント 設定 は 、 イ ベン ト 処 理 を 複数 スト ッ ク す る (キュ ー) よ うに な っ て いま す 。 
つま り 、 複 数 の クリ ッ ク イ ベン ト を 設定 し て も 、 以 前 の イベ ント 設定 は 消さ れず に 期待 通り 動作 し ます 。 この 
よう に する と ライ ブラ リ な ど を 利用 し た 場合 で も 、 イ ベン ト 発 生 時 の 不具 合 を 軽減 する こと が で きま す 。 

イベ ント を 追加 する に は 「addEventListener()」 を 使い ます 。 た だ し 、Internet Explorer で は 利用 で 
き な い た め 、「attachEvent()」 で 代用 し ます 。 「addEventListener()」 と 「attachEvent()」 の 動作 は 
似 て いま す が 、 イ ベン ト 発 生 時 の 動作 に 互換 性 が な い の で イベ ント バブ ル ア ッ プ ( イ ベン ト が 伝達 され る 処 
理 ) な どの 処理 に は 注意 が 必要 で す 。 

「addEventListener()」「attachEvent()」 で 設定 し た イベ ント を 削除 する に は 、「removeEvent 
Listener()」「detachEvent()」 を 使い ます 。 パラ メー タ に は イベ ント を 追加 し た と き と 同じ パラ メー タ を 
指定 し ます 。 パラ メー タ が 異な る と 、 違 う イ ベン ト 設 定 と みな され 、 削 除 さ れ ま せん 。 
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ここ で は 、 ペ ー ジ が 読み 込ま れ た タイ ミン グ で 自動 的 に 処理 を 行う 方 法 に つい て 説明 し ます 。 








守 層 | 因 vesgptsampe | | 合 ・ 


(③③) | @ cavescrpt-san 四 | x | uve search る ・ 


] 


ー 昌 < は ペー ジ (の マー 









「 私 の ひと り 写 真 館 」 へ よう こそ * 
お 気に入り 写真 の 中 の ら 


次 人 





(2 ceesoptson ・| ヶ | x ueeseara 


p・| 


| 話 Javasopt sampe | 倫 ・- 団 -・- 旬 ・ は ペー ジ (の マー 














塵 コン ピュ ー タ | 保護 モー ド 








「 私 の ひと り 写 真 館 」 へ よう こそ ! 
お 気に入り 写真 の 中 の 1 枚 を ラン ダム に 公開 中 ! 














ペー ジ が 読み 込ま れる と 、 ラ ン 
ダム に 画像 が 1 枚 表示 され る 


商 コン ピュ ー タ | 名 護 モ ー ド 
ーー 





「 私 の ひと り 写 真 館 」 
お 気に入り 写真 の 中 の 1 枚 4 


還 |@ Cc:avascnpt-san ・ | ヶ | x uve seara 


SS トド: 名 cs 







へ よう こそ ! 


コン ピュ ー タ | 名 護 モ ー ド : 無効 





RelWXd 事 9 の 当 目 用 目 index.htm 


<!DOCTYPE htm1] PUBLTC 
<htm1> 
<head> 


る ・ 


計 ペ ー ジ @ マー 


航 10096 < 





リー/ /W3C/ /DTD HTMTL, 4.01 Trangs1itiona1 / /EN"> 


<meta htp-equ1 マ = "Conten ヒ -t 上 ype" conEten セ = "上 ex 七 /htm1] : 


CharSe ヒ =utF-8"> 
< ヒュ 上 1e> 了 aa8SC エ 1p 上 


Samp]e</ ヒ 1 上 1@e> 


<]1ink re1]="styleshee 上 " type="text/css" 


med1ia="a11 "> 


< く 8Cr1p 上 ype= "tex 七 /aVaSC エ 1p" 


</head> 
く Dbody> 


<h1>「 私 の ひと 写真 館 」 へ よう こそ ! </h1> 


<d1iV 1d="1nfFo"> お 気 
</body> 
</htm1] > 


に 入り 写真 の 中 の 1 枚 を ラン ダム に 公 


hrefF="main.Css" 


SC= "ma1T . 8S "></ SC エ ュ p ヒ > 


\ 開 中 ! <D エ >< /d1 マ > 





5:Xa 事 eej り ョ 当 目 用 上 | 本 RS 菩 癌 参 main.js 


window.on1oad = fFunotion(){ 一環 
Yar 1maqeURL, = る 
[ "images/DSC0001 .jpg" , "images/DSC0002 .jpg" , "1mages/DSC0003 .Jpg"] ーー 
Yar 1mgTag = document .ocreateE1ement ("1mg" ) : 
Yar n = Math.FfF1oor (Math . random ( ) *imageURL . 1 ength) : 
mgTad . Sro = imageURL [n] : 
document . getE1emenEByTd ( "infFo" ) .appendChi1qd (imgTag) : 

} 





豆 ペー ジ が 読み 込ま れる と 「onLoad」 イ ベン ト が 発生 する (スク リプ ト で は 「window.onload」 で イベ ント 発生 時 の 処理 
を 指定 する ) 
話 イベ ント が 発生 し た 時 の 処理 を 記述 する 


'@ 損 3 回 秀 window.onload」 で ペー ジ 読 み 込み 時 の 処理 を 指定 する 


旧来 、 ペ ー ジ が 読み 込ま れ た 場合 の 処理 は 、<body> タ グ に 「onLoad」 イ ベン ト を 記述 し て いま し た 。 た 
と えば 、「<body onLoad="alert(1 )'>」 と する と 、 ペ ー ジ が 読み 込ま れ た 後に アラ ー ト ダイ アロ グ が 表示 
され ます 。 し か し 、 こ の 方 法 で は HTML 文 書 と プロ グラ ム が 分 離さ れ て いな いた め 、 分 業 が 難し く な り ま す 。 
そこ で 、 プ ログ ラム 側 で ペー ジ 読 み 込み 時 の イベ ント ハン ドラ を 指定 する よう に し ます 。 

ペー ジ が 読み 込ま れ た 場合 に 処理 を 行う に は 、「window.onload」 に 実行 する 処理 を 記述 し ます 。 イベ 
ント 発生 時 に 読み 出す 関数 を 指定 する の が 通例 で す 。 サン プル の よう に 無名 関数 / 匿 名 関数 を 指定 する こ 


と も で きま す 。 

「window.onload」 は 、 単 純 に 「onload」 と 書い て も 同じ よう に 動作 し ます 。 これ は JavaScript で は 
「window」 オ ブ ジ ェクト の 表記 を 省略 する こと が で きる た めで す 。 DOM が 扱え る ブラ ウザ で は この よう な 
表記 で は な く 、「addEventListener()」 を 使っ て イベ ント を 設定 する 方 が よい で し ょ う 。 これ は ライ ブラ リ 
な ど で 「window.onload」 が 定義 ご され て いれ ば 、 そ の 処理 を 上 書き し て し まう た めで す 。 また 、Intenet 
Explorer の 場合 は 「addEventListener()」 を サポ ー ト し て いま せん が 、 代 わり に 「attachEvent()」 を 
使っ て イベ ント 処理 を 設定 する こと が で きま す 。 


(@[ 間 ji 明日 来 の 方 法 で の イベ ント 削除 方 法 
旧来 の 方 法 で の イベ ント 削除 方 法 は 、 イ ベン ト ハ ンド ラ に 「null」 を 設定 する こと で 行い ます 。 


document . body . onc1iok = nu11: 


また 、null 以 外 で も 次 の よう に 空 の 関数 を 指定 する 方 法 も あり ます 。 


document .body .onc1ick = Funoction( ) {) : 
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SE2KSNIMRGINN 用 [ICHAPrEo8 rl jioz 


いて 解説 し ます 。 


PCLLD 
し ee 
。 ロ 














画像 や エレメント な ご ど を 
ドラ ッ グ で きる よう に する 


ここ で は 、script.aculo.us ラ イブ ラリ を 使っ て 、 画 像 や エレ メン ト な ど を ドラ ッ グ で きる よう に する 方 法 に つ 





ID 名 [dragBox 1 」 を ドラ ッ グ し た 場合 





ID 名 「dragBox1」 隊 ョ 


さま きま な ドラ ッ グ を 実 環 し て いま す 。 





POCCCCCLLT) 





上 こ は ド ラッ グ す る と 元 の 位置 に 戻り ます 


E に は 匠 交 に ラッ グ で きま す 当 


| ID 名 「draglmage」 aa 





ーー ーー 一 


元 の 位置 戻り ま す 


00% ・ 


| 央 コ ンピュータ | 年 護 モ ー ド : 無効 











グリ ッ ド に 沿っ て ドラ ッ グ 
させ る こと が で きる 





ッ プ で きま す 1 
ウ グ す る と 元 の 位置 に 戻り ます | 『ー 元 の 位置 に 戻っ て 行く 














剖 コン ピュ ー タ | 名 義 モ ー ド : 舞 功 。 





Resee ョ 当 目 用 | 男 語 際 index.htm 
< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 
<meta h ヒ 上 上 わ ー@Gqu1 マ = "で ConEen ヒ -type" ConEen ヒ ="exxt /htm] : 
CharSe ヒ =uF-8"> 《 
< ヒュ 1 七 ]e> け aa8SC エ ip Samp1e</ 上 1 上 1e> 
<1ink re]="sty1eshee" type="Eext/css" hrefF="main.css" 
media="a11 "> ャ 一 
< く 8Cr1p 上 ype=" exx / JaVaSC エ 1D " 5 エ C= "proEotype . Ss "></ SC エ 1D セ > 
ぐ 8C エ 1p 上 ype= "上 ex / aaSC エ 1D 七 " SrC= "SCr1iptaou1ous . 8 "></ SC エ 1p キ > 
く 8C エ 1p 上 ype= "上 / Ja マ aSC エ 1D " 8 エ o= "matin . 8 "></ SC エ 1 わ ヒ > 


</head> 

<body> 
さま ざま な ドラ ッ グ を 実現 し て いま す 。 
<d1iv 1d="dragBox1 "> ここ は 普通 に ドラ ッ グ で きま す < /d1 マ > 
<div 1d="dragBox2 "> ここ は ドラ ッ グ する と 元 の 位置 に 戻り ます < /d1 マ > 暫 
< く 1mg Sro="1mages/1con .d1E" 1d="qdragTmagde"> 

</body> 

</htm1> 





一 | ドラ ッ グ 対象 の エレ メン ト や 画像 に は ID 名 を 指定 する 


国有 有用 本 YR 還 交 mainjs 


window.on1oad = funotion( ) { 
new Draggab1e ( "dragBox1" ) : 一 名 
new Draggab1e ( "dragBox2" , { revert:true } ): 一 婁 
new Draggab1e ("dragTmage", { snap: Function (xx,) ( に 」 
ェ return [Math.F1oor(x / 20)*20, Math.F1oor(y / 20)*20]: }}): 





b@)9I@ 事 ぐり 


頭 |D 名 [dragBox 1 」 は 普通 に ドラ ッ グ で きる よう に 設定 する 
話 |D 名 「dragBox2」 は ドラ ッ グ 後に 元 の 位置 に 戻る よう に 設定 する 
医 |D 名 「draglmage」 は 520 ピク セル ご と に 移動 する よう に 設定 する 


@7i 抽 回 箇 ドラ ッ グ を 実現 する に は script.aculo.us ラ イブ ラリ の 「new Draggable()」 を 使う 


ペー ジ 上 の エレ メン ト や 画像 を ドラ ッ グ で きる よう に する に は 、script.aculO0.us ラ イブ ラリ を 使う と 便利 
で す 。 script.aculo.us で は 、「Draggable())」 に ドラ ッ グ 対象 と な る エレ メン ト の ID 名 また は オブ ジェ クト 
を 指定 する だ け で ドラ ッ グ する こと が 可能 に な り ま す 。 

オプ ショ ン を 指定 する こと で 、 ド ラッ グ 時 の 処理 を 設定 する こと が で きま す 。 オ プシ ョ ン は 「Draggable()」 


の 番目 の パラ メー タ で 指定 し ます 。 「revertl」 オ プシ ョ ン で 「true」 を 指定 する と 、 ド ラッ グ 後 に 元 の 位置 に 
戻り ます 。 「snap」 を 指定 する と 、 関 数 の 戻り 値 に 応じ た 座標 に スナ ッ プ する よう に ドラ ッ グ で きる よう に な 
り ま す 。 
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押さ れ た キー の キー コー ド を 
取得 する 
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Live Search 
ー gg >> 


Cosvasarptsm | ヶ | x | 
人 @ spt sompe | | 人 ・ 回 ・ 弄 ・ 




















押さ れ た キー の キー コー ド は ? 
| 
























目 押さ れ た キー の キー コー ド は ? 


5 (⑳) 
ト e 
上 iz 〇 


本 ①) 















曽 コン ビ ピュー タ | 保護 モー ド : 無効 








キー を 押す と 、 押 され た 
キー コー ド と 対応 する 
文字 が 表示 され る 

















、 凍 コン ピュ ー タ | 保護 モー ド : 無 交 





SeWYmwe7 当 目 用 用 馬 軸 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL. 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta htDp-eGqdu1 マ = "Conten ヒ -t 上 ype" Conten ヒ = "上 ex 七 /htm] : 
Charse ヒ =utF-8"> 
< ヒュ 1 上 1@>JaVaSC エ 1p 七 Samp1e</ ヒ 1 上 1@e> 
<11ink re1="styleshee 上 " type= "tex 上 /css" hrefF="main.css" 
media="a11 "> 
く 8C エ 1p 上 上 ype= "上 Gx / aaSC エ 1D ヒ "8 と C= "matin . 8 "></ SC エ ュ の わ ヒ > 
</head> 
<body> 
押さ れ た キー の キー コー ド は ? 
< く d1V 1d="reSu]1 上 "></ ュ マッ > 
</body> 
</htm1 > 


雪上 用 用 EVER 前 main」js 


window.on1oad = Funotion( ) { 
window . documen . onkeydowmn = Funo て ion (ev ) { 
ifF (ev 上 ) { 
Var ko = evt.keyCode : 一 名 
})el1set 
Var ko = evenrnt . keyCode : 一 許 
} 


いのら 19@ 事 @@)p 





Ya エ Chr = String . FromCharCode ( kc) : 
documenE .getE1ementByTd ( "resu1 ヒ " ) . 1nnerHTMT, += に 
ko+" ("+Ch エ +" ) <b エ >" * プ 


頭 |nternet Explorer 以 外 の 場合 の キー 入力 デー タ 処 理 を 行う 
話 Internet Explorer の 場合 の キー 入力 デー タ 処 理 を 行う 
回 入力 され た キー コー ド を 「String.fromCharCode()」 を 使っ て 文字 に 変換 する 


(@7 損 6) 映 租 キー コー ド は 「keyCode」 プ ロバ パテ ィ で 取得 する 


キー コー ド は 、 イ ベン ト オ ブ ジェ クト の 「keyCode」 プ ロ パ ティ で 取得 する こと が で きま す 。 この プロ パテ 
ィ は Internet Explorer や Firefox な どの 他 の ブラ ウザ で も 同じ で す が 、 返 べ れ る キー コー ド は 異な る 場合 





が あり ます 。 また 、 キ ー ボ ー ド の 種類 や 設定 に よっ て も 変わ る こと が あり ます 。 
発生 し た イベ ント が 「keyup」「keydown] な の か 「keypress」 な の か に よっ て も 返さ れる キー コー ド の 
値 が 異な る の で 注意 が 必要 で す 。 





(@'[Wiili イベ ント が 発生 し た 時 記 


Firefox と Safari で は 、 イ ベン ト が 発生 し た 時 刻 を 取得 する こと で きま す 。 イベ ント 発生 時 の 時 刻 は 、 イ ベ 
ント オブ ジェ クト の 「timeStamp」 プ ロ パ ティ に 格納 され ます 。 


window.on1oad = Funotion( ) { 
window .document . onkeydowrm = fFunotion ( ev ) { 
Yar EmS = "『": 
ifF (ev) { 
Var ko = evt.keyCode: 


tms = ev .ime8tamp: 


}elset 
Yar ko = evenrt . keyCode 
} 
Ya Ch エ = Sring . FromCharCode ( Koc) : 
documen . getE1 ementByTd ("resu1 上 " ) . 1nnerHTMTL, += 等 
kc+" ("+Ch エ +" : " 二 上 mS す ") <b エ >": 4 ご 











プス 2 ユ へ 上 80 -3 ヨ 1dYHO 





SE の IN | 較 [| 」cHaPreeos rl jioy 
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得する 
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EE 


ここ で は 、 ブ ラウ ザ 上 に ある マウ スカ ー ソ ル の 座標 を 取得 し て 、 そ の 座標 を り ア ル タ イ ム に ペー ジ 上 に 表示 
する 方 法 に つい て 解説 し ます 。 















「@ | cmescrsw ・ 2 コー エー 53 明和 
e | @ wesopt seme | 倫 ・ 加 ・ 晶 ・ が 


現在 の マウ スカ ー ソ ル の 座 林 は ? 
B25.170 





マウ スカ ー ソ ル を 移動 させ る と 、 
ベ ページ 上 に マウ スカ ー ソ ル の 座 
標 が 表示 され る 




















責 コン ピュ ー タ | 保護 モー ド : 無効 





ReiWXemee7 当 目 用 用 同軸 了 物 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1] / /EN"> 
<htm] > 
<head> 
<meta htp-equ1 マ = "ConEen ヒ -type" ConEen ヒ ="Eex モ /htm1 : 
CharSeG ヒ =u 上 F-8"> 
< モ ュ 上]e>JaVaSCrip 上 Samp1e</ 上 ヒュ 上 1]e> 
<1ink re]="sty1esheet" ype="Eext/css" hrefF="main.oss" 
media="a11 "> 
で ぐ SC エ 1D 上 上 ype= "上 @x 七 / J る で a8C エ 1D 七 " So= "main.S"></ SC エ 1D セ > 
</head> 
< くわ bod ア > 
現在 の マウ スカ ー ソ ル の 座標 は ? 
<d1V 1d= "eSu]1 上 ">ーーー</d1 マ > 
</body> 
</htm1> 


ReIWI7@ 





還 9e 要 目 用 | 本 本 本 main.js 


window .on1oad = fFunoction ( ) { 
window . documen . onmousemove = funotion ( ev ) { 

if (ev) { 
Var xx = evt.pageX : 一 玉 
Ya y = evt.pageY : 一 略 

})e1set 
Var xx = even.x + qoocument .body . scro11Lef 一 話 
Yar y = event.y + document .body . scro11Top: 一 話 

} 


document . getE1ementByTdqd ( "resu1 ヒ " ) .1nnerHTML, = x+", リオ キツ アァ 
} 
} 


頭 internet Explorer 以 外 で の マウ スカ ー ソ ル の X 座 標 を 取得 する 
話 nternet Explorer 以 外 で の マウ スカ ー ソ ル の Y 座 標 を 取得 する 
話 Internet Explorer で の マウ スカ ー ソ ル の XX 座標 + ス クロ ー ル X 座 標 を 取得 する 
nternet Explorer で の マウ スカ ー ソ ル の Y 座 標 + ネ クロール Y 座 標 を 取得 する 


@ 軸 上 座 標 を 取得 する プロ バテ ィ は ブラ ウザ ご と に 異な る の で 注意 が 必要 


マウ スカ ー ソ ル の 座標 値 は 、 イ ベン ト オ ブ ジェ クト の 「x」 プ ロ パ ティ と 「y」 プ ロ パ ティ 、 ま た は 「pageX」 プ 
ロ パ ティ と 「pageY] プ ロ パ ティ で 取得 する こと が で きま す 。 Internet Explorer で は 「x」「y」 プ ロ パ ティ で 
座標 値 を 取得 で きま す が 、 ペ ー ジ が スク ロー ル し た 場合 に は ペー ジ 上 の 座標 値 で は な く ブ ラウ ザ 上 の 座 
標 値 に な っ て し まう た め 、 ペ ー ジ 上 の 座標 値 を 求め る 場合 に は スク ロー ル 量 を 加算 し ます 。 横 方 向 の スク 
ロー ル 量 は 「document.body.scrollLeft」、 縦 方 向 の スク ロー ル 量 は 「document.body.scrollTop] 
と な り ま す 。 

Internet Explorer 以 外 の ブラ ウザ で は イベ ント オブ ジェ クト の 「pageX」「pageY] プ ロ パ ティ で 座標 値 
を 読み 出す こと が で きま す 。 な お 、Safari ら の 場合 は 、 読 み 出さ れる 「clientX」「clientY」 の 座標 値 が 他 の 
ブラ ウザ と 異な る の で 注意 が 必要 で す 。 


Wi[iil nternet Explorer で の エレ メン ト 関 連 プ ロ パ ティ 


エレ メン ト の マー ジン や 枠 幅 な ど を 示す プロ パテ ィ は 、 数 多く あり ます 。 Internet Explorer の 場合 、 次 の 
UHL に 関連 図 が 用 意 さ れ て いま す 。 


http://msdn.microsoft.com/library/ja/default.asp?2url=/IiDrary/ja/jpisdk/ 
dhtml/measure/meaSuring.aSD 
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目 『6! マウ スカ ー ソ ル を 重ね た と き に 
表示 され て いる 文字 列 を 入れ 替え る 
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つの 


ここ で は 、 マ ウス カー ソル を 重ね た タイ ミン グ で 、 そ こ に 表示 され て いる テキ スト を 入れ 替え る 方 法 に つい て 
解説 し ます 。 














オス ス メ 情 報 
※ マウ スカ ー ソ ル を 重ね る と 、 オス ス メ 南 品 が 表示 され ます 。 

パン コン 情報 
ビジ カメ 情報 


Bu ンタ 情報 































に 


末 コン ピュ ー タ | 保護 モー ド : 無効 



















※ マウ スカ ー ソ ル を 重ね る と 、 オス ス メ 商 品 が 表示 され ます 。 









Nikon が オス ス メ で す 
ピリ ンタ 情報 











マウ スカ ー ソ ル を 文字 の 上 に 
重ね る と 、 文 字 が 入れ 替わる 











剖 コン ピュ ー タ | 保護 モー ド : 無効 


Seeme@ 当 目 用 用 馬 診 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01 TransiEtiona1 / /EN"> 
<htm] > 
<head> 
<mea htp-equ1Y= "conEen ヒ -type" conEen モ ="Eex 上 /htm1]: 
Cha エ SeG キ =utF-8"> 
< 上 ュ 上 1e>JavaSc エ ip 上 Samp1e</ 七 1 上 1e> 
<1ink re1]="sty1eshee 上 " type="EexE/css" hrefF="main.css" 
med1ia="a11 "> 
く 8C エ 1Dp 上 上 ype= "上 ex 上 / る a マ aSC エ 1D ヒ "SrC="matin . 8 "></ SC エ ュ 1 わ ヒ > 
</head> 
<body> 
<h1> オ スス メ 情 報 </h1> 
※ マ ウス カー ソル を 重ね る と 、 オ スス メ 商 品 が 表示 され ます 。 の 


<d ュ 1 1d="1nFo2 "> デジカメ 情報 </d1 ミ マ > 
<d ュ iY 1d="1nfFo3 "> プリ ンタ 情報 </d1 マ > 
</body> 
</htm1> 


<d ュ 1 1d=" infFo1 "> パソ コン 情報 </d1 マ > 


本 テキ スト を 入れ 替え る 領域 に は ID 名 を 指定 する 


@19I@ 吉 の @) 


DE 』 回 main.jS 


window.on1oad = fFunotion( ) { 

Ya SwapText = { 
"info1" : [ "Mac が オス ス メ で す " ] , 
"info2" : [ "Nikon が オス ス メ で す " ] p 
"infFo3" : [ "EPSON が オス ス メ で す " ] 

} 

For (1 in swapText ) { 一 許 
SwapText [1] [1] = document .getE] emenByTd (1 ) . innerHTMT : 一 葉 


documen . getE1emenEByTdq (1 ) .onmouseover = Funotion ( ) 「 回 
this . innerHTMI, = swapTex [this .1d] [0] : 





} 

documen . getE1ementByTd ( 1 ) .onmouseou ヒ = Funotion( ) { に] 
this .1nnerHTMT, = swapText [Ehis .1d] [1 : 

} 


*ー 


… 入 れ 替 える テキ スト の ID 名 と 入れ 替え る 内 容 を ペア に し て 用 意 する 
… 入 れ 替 える テキ スト の 数 だ け 繰 り 返 す 

… 最 初 の 状態 で 表示 され て いる 内 容 を 配列 変数 に 入れ る 

… マ ウス カー ソル が 重なっ た と き に テキ スト を 入れ 替え る 

… マ ウス カー ソル が 離れ た ら 最 初 の テキ スト に 戻す 


(@ 加 人 】 映 租 名 と 表示 内 容 を ペア に し て 変数 に 入れ て お く 
マウ ス オ ー バ ー で テキ スト を 入れ 替え る に は 、 入 れ 替え る テキ スト を あら か じ め 連 想 配列 (/ い ッシュ ) に 
入れ て お きま す 。 連想 配列 に は 、 入 れ 替 える 領域 の ID 名 と 入れ 替え る テキ スト を ペア に し て 設定 し て お き 
ます 。 


マウ スイ ベン ト が 発生 し た ら 、 自 分 自身 の ID を 読み 出し 、 そ の ID を キー に し て 連想 配列 か ら 入 れ 替 える 
テキ スト を 読み 出し ます 。 自分 自身 の ID は 「this.id] と し て 読み 出す こと が で きま す 。 
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イベ ント が 発生 し た オブ ジェ クト 
(タグ ) に より 動作 を 変え る 
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いろ いろ な と ころ を クリ ッ ク し よう ! 


ーーー 


| 十 信 回 … 起こ 







計 ぶ |@wesotsampe | 











いろ いろ な と ころ を クリ ッ ク し よう ! 


[な 


ボタ ン が クリ ッ ク さ れ ま し た 

















































ES ク し よう ! 





限 出 し が クリ ッ ク さ れ ま し た 







いろ いろ な と ころ を クリ ッ ク し よう ! 






























ペー ジ 上 や ボタ ン 上 、 領 域 上 で 
クリ ッ ク す る と 、 ど こ が ク リッ ク 
され た か が 表示 され る 


ReiWamw 当 目 用 用 同軸 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 

<meta h ヒ 上 p-equ1 マ = "ConEen ヒ - 上 ype" ConEen ヒ = "上 ex 上 /htm1 : 

CharSe モ =utF-8"> 

< ヒュ 上 ]e>Java8oc エ 1p Samp1e</ ヒ 1 ユ 上 1e> 

<1inmk re]="st 上 yleshee" 上 type= "上 ex 上 /cCss" hreF="main.CS8" 

media="a11 "> 

く SC エ 1D 上 ype= "上 @Gx 七 / る VaS8C エ 1D ヒ "SC="ma1m . 8 "></ SC エ ュ 1D キ > 


</head> の 
















ォ ー ム が クリ ッ ク され まし た 








<body テ > 
<h1> い ろ い ろ な と ころ を クリ ッ ク し よう ! < /h1> 


<Form acC 上 ion=" ./event . cg1" method= "get" name="mainForm"> 
<1npu ヒ 上 ype= "buEon" 1d= "checkButEon" Ya1ue=" ボ タン"><b ェ > 
< く / Form> 
<d1V 1d="resu1 上 "> 結果 :</ ュ マ > 
</body> 
</htm1> 


Seamee 当 目 用 用 本 RS 琴 衣 輝 main.js 


window.on1oad = funotion( ) { 
window .documen . onc1iock = Funotion ( eV) { 
if (!evt) { 
var eType = evernt . sroE1ement . tagName : 一 視 





})else{ 
Yar eType = ev .arget . EagName : 一 臣 
} 
eType = eType .toLowerCase( ) : 
8 の も eKE = "リッ 


Switch(eType) 【 
case "h1" : tex = "見 出し が クリ ッ ク さ れ ま し た " : 


break: 

caSe "1nput" : ex 上 = "ボタ ン が クリ ッ ク さ れ ま し た " : 
break: 

CaSe "Form" : tex = "フォ ー ム が クリ ッ ク さ れ ま し た " 
break: 


} 
document . getE1ementByTq ( "resu1 ヒ " ) . 1nnerHTMT, = 上 ex : 


副 クリ ッ ク さ れ た 場所 の タグ 名 を 取得 する (Internet Explorer の 場合 ) 
放 クリ ッ ク さ れ た 場所 の タグ 名 を 取得 する (Internet Explorer 以 外 の ブラ ウザ の 場合 ) 
… イ ベン ト が 発生 し た 場所 の タグ 名 に 応じ て 表示 する メッ セー ジ を 変え る 


@ 加 市 遇 卓 イ ベン ト 発 生 時 の ター ゲッ ト を 取得 する 
イベ ント が 発生 し た 場所 に 応じ て 処理 を 変え る に は 、 ど の タグ 上 で イベ ント が 発生 し た か を 求め ます が 、 
Internet Explorer と 他 の ブラ ウザ で 取得 方 法 が 異な っ て いま す 。 Internet Explorer で は 、「event」 オ ブ 
ジェ クト の 「srcElement」 プ ロ パ ティ に イベ ント が 発生 し た 場所 の タグ 情報 が 格納 され ます 。 Firefox や 
Safari、Opera な ど で は イベ ント オブ ジェ クト の 「target」 プ ロ パ ティ に イベ ント が 発生 し た 場所 の タグ 情報 


が 格納 され ます 。 
タグ 名 は 「tagName」 プ ロ パ ティ で 取得 する こと が で きま す 。 サン プル で は 「switch.…case」 で 取得 し 
た タグ 名 ご と に 処理 を 分 け て 異な る テキ スト を ペー ジ 上 に 表示 し て いま す 。 











プス へ 80 -3 ヨ ldVHO 





プス 上 80 -3 ヨ 1dYHO 











まだ 生成 され て いな い オ ブ ジ ェクト に 
の 222 で 上 ラー 


JavaScript プ ログ ラム は 、HTML フ ァイル が 読み 込ま れ た 後に 実行 され る わけ で は あり ませ ん 。 
HTML 文 書 内 に <script> タ グ が ある と JavaScript フ ァイル を 読み 込ん で 実行 し 、 そ の 後に 続く 
HTML 文 書 の 構築 処理 を 行い ます 。 つま り 次 の よう な サン プル プロ グラ ム で は 、 ま だ HTML フ ァイル 
に 記述 され た <div> タ グ が 生成 され て いな いた め エ ラー に な り ま す 。 

HTML フ ァイル 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN "> 
<htm] > 
<head> 
<mea h ヒ 上 p-equ1 マ = "ConEen ヒ -t 上 ype" conten キ = "tex 七 /htm1 
Cha エ Se ヒ =uF-8 "> 
< ヒュ 上]e> 了 JaVa8Cr1p Samp1e</ ヒ 1 上 1e> 
<1ink re1="sty1eshee 上 " type="tex 上 /css" href="matn.CsS" 
media="a11 "> 
<8Cr1pt type= "ex 上 / avaSCr エ 1p" Sro="main .]S?Sub1 . 8 , Sub2 .]8"> 
く / SC エ 1D キ > 
</head> 
<Dody> 
<h1> 未 生成 の オブ ジェ クト へ の アク セス </h1 > 
<d1V 1d=" エ eSu1 上 "></d1V> 


< く /body> 
</htm1> 
⑳JavaScript フ ァイル (実行 する と エラ ー) 
document .getE1ementByTd ( "resu1 ヒ " ) .1nnerHTMTL, = "OK": 


HTML フ ァイル が 読み 込ま れ た ら 処理 する た め に は 、 ペ ー ジ が 完全 に 読み 込ま れ て 構築 され た こと 
を 示す 「onload] イ ベン ト が 発生 し た ら 処 理 を 行う よう に し ます 。 つま り 上 記 の サン プル は 、 次 の よう に 
記述 し な いと 正しく 動作 し ませ ん 。 


w1ndow.on1oad = Funotion ( ) { 
document . getE1 ementByTqd ( "resu1 ヒ " ) .1nnerHTMTL, = "OK": 


} 





ーーー- テ ーーーーーーー エ ーーー==ーーー - ーー 


| 
| 






CHAPTER- 09 
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sECTION 開 議 


1 の テキ スト フィ ー ル ド に 入力 し た 
文字 列 か ら 1 文 字 だ け 抜 き 出す 


ここ で は 、 文 字 列 の 中 か ら 先頭 の 1 文字 だ け を 抽出 する 方 法 に つい て 解説 し ます 。 














ボタ ン を クリ ッ ク す る と … 








入力 され た 文字 列 の 先頭 の 
先頭 の 文字 は 「 り 」 で す 1 文字 が 表示 され る 








乾 コン ピュ ー タ | 保護 モー ド : 無効 





Eee 事 e 当 目 用 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 


<htm1 > 
<head> の 





で <me ヒ a h 上 上 ウー@G 可 qu ユマ = "で On 上 Gn ヒ ー モ ye" ご COn ヒ 6 ロモ = " ヒ ex モ /htm1 : 
CharSe キ =u 革 F-8"> 6 
< ヒュ 1 上 1e> け ayaSCr1p 上 Samp1e</ ヒ 1 上 1e> 
<11njk re1="sty1eshee" type="tex ヒ /oss" href="main.CSS" 電 。 
media="a11 "> を 
く SC エ 1D 上 上 ype= "上 @ ヒ / る VaSC エ ュ ユヒ " SC= "maim . 8 "></ SC て 1p セ ヒ > 
</head> 
<bod ア > 
<Form acion=" ./cheok . Cg1" method= "ge ヒ 上 " name="mainForm"> 
文字 :<1npu type="texE" name="userName" 
1d= "userName" Ya1ue=" り ん ご "> 
<1npu type= "button" 1d="checkBuEton" va1ue=" 先頭 の み 抽出 "> 
</fForm> 
<d1iV 1d="resu1 上 "> 結果 :</d1 マ > 
</ body> 
</htm1> 


国 旧 用 用 EYEE 開 韻 あ mainjs 


window.on1oad = fFunotion( ) { 
document . getE1ementByTd ( "checkButon" ) .onc1ick = Funotion( ) { 
Yar uName = qdocument .getE1ementByTdq ( "userName" ) .va1ue: 一 名 
Ya で = uName .charAt (0) 一峰 
document .getE1emenByTqd ( "resu1 上 " ) .1nnerHTML = 
"先頭 の 文字 は 「"+c+ "」 で す ": ーー ン 


bp@)9I@ 事 る @) り ) 





台 テキ スト フィ ー ル ド の 内 容 を 読み 出す 
許 「charAt(O)」 と し て 最初 の 文字 を 抽出 する 


@7 加 9】 出 秀 文字 列 か ら 1 文字 抜き 出す に は 「charAt()」 を 使う 
文字 列 か ら 任意 の 位置 の 1 文字 を 抜き 出す に は 、「charAt()」 を 使い ます 。 パラ メー タ に は 抜き 出し た 
い 文 字 の 位置 を 指定 し ます 。 文字 の 位置 は 、 先 頭 の 文字 が 「0」 と な る 点 に 注意 し て くだ さい 。 の 番目 の 文 
字 を 抜き 出し た い 場 合 は 、「charAt( 1 )]」 と な り ま す 。 


(@IWjiilW 未 尾 の 文字 を 抜き 出す に は 


先頭 の 文字 で は な く 、 未 尾 の 1 文字 を 抜き 出し た い 場 合 は 、 文 字 列 の 長 さ か ら 「 1」 を 引い た 値 を 指定 し 
ます 。 サン プル の 場合 、 次 の よう に する と 、 未 尾 の 1 文字 を 抜き 出す て と が で きま す 。 


Yar ご = uName.cCharA (uName . 1ength-1 ) : 
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sEcTioh 旧 議 


由 選 』 指定 範囲 の 文字 列 を 抜き 出す 


ここ で は 、 文 字 列 の 4 文字 目 一 7 文字 目 の 文字 列 を 抽出 する 方 法 に つい て 解説 し ます 。 


























つい | coast Sal ・| 人 サ | X | Hve Search 
ーー 守 w @mwesqtsmpe ーー ト e・-< In 
住所 : 東京 都 千 代田 区 販 田 村 ボタ ン を クリ ッ ク す る と … 
の 
王 
補 結果 : 
司 
2 ピ 
〇 
ヽ O 
EE 
文 
列 商 コン ピュ ー タ | 保護 モー ド : 無効 


















(の:③) [9 cyowesapc Sa マ 加 ※ ive Search 


人 | 人 の vesqptsompe 所 | 食 ・ 思 ao 











住所 東京 者 千代 田 区 朗 田 橋 


入力 され た 文字 列 の 4 一 7 番 


4 文字 は 「 千 代田 区 」 で す 目 の 文字 が 表示 され る 








章 コン ピュ ー タ | 保護 モー ド : 無効 


Resee 当 目 旧 用 馬 語 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML. 4.01 Transitiona1 / /EN"> 


<htm] > 
<head> の 


EZ 


<meta h 上 上 わ ー@qu1 マ = "で ConE 上 en ヒーEyjpe" ConEen ヒ =" ヒ ex /htm1 : 

で harSe キ =utF-8"> 

< ヒュ ヒ ]@> 了 aaSC エ 1p 上 Samp1e</ ヒ 1 ヒ 上]e> 

<11ink re1="styleshee" ype="EexE/css" hrefF="main.css" 

media="a11 "> 

く SC 了 1Dp 上 上 yDe= " ヒ G メ ヒ 上 / ]a マ ASC エ 1D" SC= "ma1n . 8S "></ SC エ ュ わ ヒ > 
</head> 
<Dbody> 

<fForm acion=" ./cheock . cg1" method= "ge 上 " name= "mainForm"> 

住所 :<1nput ype="tex 上 " name="uSerAqdqdres8" 衝 








1qd="userAdqdress" Ya1ue=" 東 京都 千代 田 区 飯田 橋 "> に コ 

<1npu 上 type="buEon" 1d="checkBuEton" va1ue=" 抽 出 "> 

</ Form> 

<div 1d="resu1 ヒ "> 結果 :</G1 マ > の 
</body> 還 
</htm1> 5 
刷 
や 
SeIWXe@@7 当 目 用 | main.js S 
1_」 
window.on1oad = Funotion ( ) { 文 
document .getE1emenEByTd ( "checkBu モ ton" ) .onc1iok = Funotion( ) { 字 
Yar uName = document .getE1ementByTdq ( "userName" ) .Ya1ue: 一 名 列 


Yar str = uName .Substring (3, 7) : 一 話 
document .qetE1emenByTd ( "resu1" ) .1nnerHTMIL, = = 
"4<7 文 字 は 「"+st 上 エ +"」 で す ": 


… テ キス ト フ ィ ー ル ド の 内 容 を 読み 出す 
…「substring(3.7)」 と し て 最初 の 4ー7 文 字 目 を 抽出 する 


(@j 抽 9】 映 科 指定 範囲 の 文字 列 を 抜き 出す に は 「substring()」 を 使う 
文字 列 か ら 任意 の 範囲 の 文字 列 を 抜き 出す に は 、「substring()」 を 使い ます 。 パラ メー タ は ら つ あら 、 抜 
き 出 す 範 囲 の 開始 位置 と 終了 位置 を 指定 し ます 。 抜き 出す 文字 の 位置 は 先頭 の 文字 が 「0] に な る の で 注 
意 が 必要 で す 。 「substring(0.1 )」 と する と 先頭 の 1 文字 だ け 、「substring(0.2)」 と する と 先頭 か らら 文 
字 が 抜き 出さ れ ま す 。 








抜き 出す 文字 列 を 未 尾 か ら 指定 し た い 場 合 に は 、「substring0」 で は な く 、「slice0」 を 使う と 便利 で す 。 
「slice)」 は パラ メー タ に 負数 を 指定 する こと が で き 、「- 1」 と する と 未 尾 の 文字 を 指定 し た こと に な り ま 
す 。 「slice(3.- ら )] と する と 、 先 頭 か ら 数 えて 4 文字 目 か ら 未 尾 か ら 数 えて 3 文字 まで が 抜き 出さ れ ま す 。 

















SekeN 間 | 
及 | 指定 位置 か ら 指定 され た 
文字 数 だ け 抜き 出す 








ここ で は 、 文 字 列 の 先頭 か ら 6 文字 分 を 抽出 する 方 法 に つい て 解説 し ます 。 














ボタ ン を クリ ッ ク す る と … 








計 判 放  60-d ヨ 1dYHO 








住所 : 新潟 上 新潟 市 西 名 目 所 
は 


5 : 入力 され た 文字 列 の 先頭 
リ 「 新 潟 県 新 : = 
先頭 か ら 6 文字 は 「 新 潟 県 新潟 市 」 で す 6 文字 分 が 表示 され る 











商 コン ピュ ユー タ | 保護 モー ド : 無効 


SeWXemeem 当 目 用 用 馬 誠 際 index.htm 


< く !DOCTYPE htm] PUBLTC "-//W3C//DTD HTML. 4.01 Transitiona1 / /EN"> 


<htm1] > 
<head> の 





<meEa h ヒ 上 わ ー@Gqdu1 マ =" Conen ヒ type" conEen ヒ ="Eex モ 上 /htm1: = 

CharSe ヒ =uEF-8 "> 7 

< ヒュ 上 1e> 了 aaSC エ ip 上 Samp1e</ ヒ ユ モ 1e> 

<11nk re1="sty1eshee" type="tex モ /css" hrefF="main.CS8" 者 。 

media="a11 "> + ご 

ぐ SC エ 1D 上 ype= "Gex 上 / ゴ aVaSC エ 1 上 " So= "ma1in .]S "></ SC て 1p ヒ > 
</head> 


< く Dbody> 
<Form acion=" ./cheock .Cg1" method= "ge 上 " name="mainForm"> 
住所 :<1npu 七 type= "tex ヒ " name="uSerAqdQdres8" 1d="userAddress" = 
Ya1ue=" 新 潟 県 新潟 市 西 名 目 所 "> am 
く 1npu type="butEton" 1d="checkBuEton" Ya1ue=" 抽 出 "> 
</fForm> 
<diy 1d="resu1 モ "> 結果 :</d1 マ > 
</body> 
</htm1> 
ReWXe 事 eg 当 目 用 上 main.js 





window.on1oad = Funotion( ) { 
documen . getE1ementByTd ( "checkBu 上 ton" ) .onc1ick = Funoction( ) { 
Yar uAqqdress = qoocument .getE1ementByTd ( "userAqdqdress" ) .Ya1ue: 一 名 
Yar Str = uAdqdqress . Substr ( 0 , 6) : 一 峰 
document . getE1emenEByTd ( "resu1 モ " ) . 1nnerHTMTL, = 。 
"先頭 か ら 6 文字 は 「"+st ェ +"」 で す ": ン 


台 テキ スト フィ ー ル ド の 内 容 を 読み 出す 
話 「substr(0.6)」 と し て 最初 か ら 6 文字 分 を 抽出 する 


⑯ 高 滑 】 映 自 指定 され た 数 の 文字 列 を 抜き 出す に は 「substr()」 を 使う 
指定 位置 か ら 任意 の 数 の 文字 を 抜き 出す に は 「substr()」 を 使い ます 。 パラ メー タ は ら つ あり 、 最 初 が 抜 
き 出 す 文 字 の 位置 、 次 が 抜き 出す 文字 数 に な り ま す 。 抜き 出す 文字 の 位置 は 「0] か ら 始 まる 点 に 注意 し て 
くだ さい 。 「substr(0.2)」 と する と 、 最 初 の 2 文字 が 抜き 出さ れ ま す 。 抜き 出す 文字 数 の 方 が 多い 場合 に 
は 、 自 動 的 に 文字 列 の 未 尾 ま で が 抜き 出さ れ ま す 。 








また 、 未 尾 か ら 抜 き 出し た い 場 合 は 、「substr()」 の 最初 の パラ メー タ に 負数 を 指定 し ます 。 「-3] と する 
と 、 未 尾 か ら 9 文 字 目 が 抜き 出す 開始 位置 と な り ま す 。 
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SEG INOIN | 靖 | CHAPTER09 ょ | 」iis 
上 記 | 文字 列 を 連結 する 











ここ で は 、 ら つの テキ スト フィ ー ル ド に 入力 され た 文字 列 を 連結 する 方 法 に つい て 解説 し ます 。 


















































倒 信 lg CiYJavaScript-Sal Js| x | Live Seorch 

ー] 次 < | @mascmptsample | | 食 ・ 回 ・ 下 ・ 
員 ボタ ン を クリ ッ ク す る と … 
FE 
と 
で 
ゴ コ 
TT 
7 補 
【) 
つ 
に 1 
列 曽 コン ピュ ー タ | 保護 モー ド : 無効 

19 Cmavasopt-sa | な xl SEC 

ーー ビー ビー ーー ーー 

名 : 次 朗 
入力 され た 文字 列 が 
「 山 田 次 郎 」 で 
氏名 は 「 山 田 次 郎 」 で す 連結 され る 
商 コン ピュ ー タ | 保護 モー ド : 無効 








eeee 当 目 用 目 index.htm 


<!DOCTYPE htm1] PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN "> 
<htm1] > 


<head> の 


Po 


<mea h 上 上 わ ー@Gqdu ユ マー "で COn モ en ヒー 上 y わ pe" ご Conen ヒ = "ヒモ /htm1 : 
CharSeG ヒ =uF-8"> 
< ヒュ 上] 6> 了 aa8C エ 1 ュ p 上 Samp1e< / 上 1 上 1e> 
<1ink re]="styTeshee" type="Eext/css" hrefF="main.cSsS" =。 
med1ia="a11 "> 
く SC エ 1D ヒ 上 tyYDe=" ヒ Gx / る で aSC エ 1 わ 七 " S エ C="ma1n . 8 "></ SC エエ や ヒ > 
</head> 
<bod ツ > 
<Form acion=" ./cheok . Cg1" method= "get" name= "mainForm "> 
姓 :<1nput type="Eex 上 " name="uName1" 1d="uName1" Ya1ue=" 山田 ">< わ エ > 
名 :<1nput type="tex 上 " name="uName2" 1d="uName2" va1ue=" 次 郎 "> 
<1npu 上 ype= "buEton" 1d="ocheckButEon" ya1ue=" 連 結 す る "> 
</ Form> 
<d1iV 1d="resu1 ヒ "> 結果 :</d ュ マ > 
</body> 
</htm1> 


eg ミ gejg ヨ 邊 用 用 本 EE 司 あ mainjs 


window.on1oad = funotion( ) { 
document . getE1ementByTd ( "checkBuEton" ) .onc1iock = Funotion( ) 【 
Yar St 上 1 = qoocument .getE1ementByTd ( "uName1 " ) .a1uG: 
Yar Str2 = qoocumen .getE1ementByTd ( "uName2" ) Mo 
Yar Str = str1 + st エ 2.: 一 話 
document . getE1ementBy エ Td ( "resu1 モ " ) .1innerHTML, = "氏名 は 「"+S ヒ ェ +"」 で す ": 





… テ キス ト フ ィ ー ル ド の 内 容 を 読み 出す 
… 読 み 出し た 内 容 を 「+」 記 号 を 使っ て 連結 する 


(@jige】 映 画 六 字 列 の 連結 に は + 記 号 を 使う 
文字 列 を 連結 する に は 、「+」 記 号 を 使い ます 。 「+」 記 号 は 数 値 演算 に も 使用 され ます が 、JavaScript で 
は 数 値 と 文字 列 、 文 字 列 と 文字 列 を 「+」 記 号 で 加算 し た 場合 は 文字 列 と し て 結果 を 返し ます 。 「+」 記 号 で 


の 処理 は 左 か ら 行 われ ます 。 その 際 、 加 算 / 連 結 す る デー タ の 型 に よっ て 処理 が 変わ る こと に な り ま す 。 た 
と えば 、「2+3+"KF"] の 結果 は 文字 列 の 「5KF] と な り ま す 。 これ は 最初 に 数 値 と し て 「2+3」 が 処理 され 、 
次 に 「5+"KF"」 と な る た めで す 。 最初 か ら 文字 列 と し て 連結 し た い 場 合 に は 、 最 初 に 「""」 を 付加 し 、 
"すら +d+"KF"] の よう に し ます 。 
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SECTION | | 還 [JCHAPreRog rjins] 


] 16 文字 列 の 中 か ら 
特定 の 文字 を 削除 する 
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ここ で は 、 文 字 列 の 中 か ら 「a」 の 文字 を 削除 する 方 法 に つい て 解説 し ます 。 



















2|xleesee 


[上 ら ・ こ = さこ 


で の - 給 C:\JavaScript-Sal 


守 裕 | 人 Javascrpt sample 

















文字 : apartment 
a の 文字 前 | 除 する 



















X 上 Live Search 


P】 





⑨ 9 CrcrccPp 
> emememee | 9・e・ 
文字 : apatment 


a の 文字 宙 際 する に 























ンピュータ | 保護 モー ド : 無効 





ボタ ン を クリ ッ ク す る と … 





削除 し た 結果 は 「prtment」 で す 


入力 され た 文字 列 か ら 
「a」 の 文字 を 削除 し た 
結果 が 表示 され る 





コン ピュ ー タ | 保護 モー ド : 無効 





eamee7 当 目 用 用 男 唐 了 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta htp-equiY= "Conen ヒ 上 ype" Conten ヒ = "tex 七 /htm1 
CharSe ヒ =uF-8"> 
< ヒュ 1 上 1 ら > け avVaSCr1p ヒ Samp1e</ ヒ 1 ュ 七 1e> 
<1ink re1="styleshee ヒ " type="tex 上 /css" hreF="ma1nm.CS5S" 
media="a11 "> 
<SC エ 1p ヒ type=" ヒ ex / JaVaSC エ 1p ヒ " S エ o="ma1m .]S "></ SC エ 1D ヒ > 
< く / head> の 


<body テ > 
<FEorm action=" ./cheok . Cg1" method= "ge ヒ 上 " name= "matnForm"> 
文字 :<1npu 上 ype= "上 ex ヒ " name=" ヒ ex モ 1" 1d="EexE1" ョ - 
Ya1ue= " apa と tmen "> 
<1npu type="buton" 1d="checkBu モ Eon" Ya1ue="a の 文字 を 削除 する "> 
</ Form> 
<d1 1d="resu1 モ "> 結果 :</1 マ > 
</body> 
</htm1> 


ee 事 9ej り 当 目 用 | main.jS 


window.onload = fFunotion( ) { 
document . getE1emenEtByTd ( "checkButton" ) .onc1ick = Function( ) { 
Var uTex = qoocument .getE1ementByTd ( "text1" ) .va1ue: 一 加 
var str = uText .sp11it("a") .Join("") : 一 
document . getE1emen モ By エ Td ( "resu1" ) .innerHTMT, = =。 
"削除 し た 結果 は 「"+st ェ + "」 で す ": 





頭 テ キス ト フ ィ ー ル ド の 内 容 を 読み 出す 
話 読み 出し た 内 容 か ら 「split()」 を 使っ て 「a」 の 文字 を 削除 し た 後に 「join()」 を 使っ て 再度 連結 する 


@ 損 抽 計 ) 映 秀 「Split()」 と 「join()」 を 組み 合わ せ て 特定 の 文字 列 を 削除 する 

文字 列 か ら 特定 の 文字 列 を 削除 する に は 、「spilt()」 と 「join()」 を 使い ます 。 まず 、「split)」 を 使っ て 削 

除 す る 文字 列 を 区 切り と し て 文字 列 を 分 解 し ます 。 この 時 点 で 削除 され た 文字 以外 が 配列 と し て 生成 され 
ます 。 生成 され た 配列 を 「join ()」 を 使っ て 連結 する こと で 、 文 字 列 の 削除 を 行う こと が で きま す 。 














(WIiil 表 文字 列 を 指定 する の に 「"」 と 「']」 の どちら を 使え ば よい ? 
JavaScript で は 文字 列 を 指定 する 際 に 「"」( ダ ブル クォーテーション ) ま た は 「'」( シ ング ルク ォ ー テ ー 
ショ ン ) で 囲み ます 。 他 の プロ グラ ミン グ 言 語 の 中 に は 「"」 と 「'」 で 囲ん だ 場合 に 異な る 処理 が 行わ れる プ 
ログ ラミ ング 言語 が あり ます が 、JavaScript で は どちら も 同じ よう に 処理 され ます 。 
文字 列 内 に 「"」 が 入る 場合 に は 「'」 で 文字 列 を 囲み ます 。 逆 に 文字 列 内 に 「'」 が 含ま れる 場合 に は 「"」 で 囲 
み ま す 。 実際 の サン プル で は 、 次 の よう に な り ま す 。 


















Str1 PPDor! も 95 
str2 = 'Doub1e quote 18 "": 








通常 は 、 ど ちら で も 問題 あり ませ ん が 、Ajax な ど で 後 付け で プロ グラ ム を ダイ ナミ ッ ク に 読み 込み 処理 す 
る 場合 に は 、 ど ちら か に 統一 し て お く の が 安全 で す 。 統一 する の で あれ ば 、「'」 で 囲 の よう に し て お く と 後々 
よい で し ょ う 。 
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SBINIICONN | | 靖 CHAPTER-09 kl 11Z 
| 了 指定 し た 文字 列 が 
存在 する か 調べ る 











選 判 議 60-d コ 1dYHO 


2/2 





ここ で は 、 テ キス ト フ ィ ー ル ド 内 の 文字 列 に 「 県 」 と いう 文字 が 存在 する か どう か を 調べ る 方 法 に つい て 解説 
し ます 。 











検索 好 旬 文字 列 : 長野 県 
検索 し た い 文字 : 県 



























ボタ ン を クリ ッ ク す る と … 





検索 対象 字 列 : 長野 県 
検索 し た い 文字 : 県 


NR 







検索 し た 文字 列 の 最初 
の 位置 が 表示 され る 






3 文字 目 で 見 つか り ま し た 








部 コン ピュ ー タ | 保護 モー ド : 無効 


ReWXW%ej り 江上 上 用 旧 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 

<meta hEEDp-eqdu1 マ = "Conten ヒ -t 上 ype" Conten キ = "tex 七 /hEtm1 : 

CharSeG ヒ =u 上 fF-8"> 

< ヒュ 1 上 1e>JavaScr エ ip Samp1e</ ヒ 1 上 1e> 

<1ink re1="styleshee 上 " type=" て tex 七 /css" hreF="main.CSs" 

iiNGGGEa 三 HH き っ の 


で く S ご エ ュ エロ 上 yp@= "ヒメ ヒ / る a マ aSC エ 1 モ D ヒ "So= "main . 8 "></ SC エエ 1D ヒ > 
</head> 
<body テ > : 
<Form acion=" ./cheok . Cg1" method= "ge" name="mainForm"> 
検索 対象 文字 列 :<1nput type="ex 上 " name="targetTex" 
ュ 1d= "上 argdetTexE" Ya]1ue=" 長野 県 ">< わ ェ > 
検索 し た い 文字 :<1npu type="Eex ヒ " name="SearchTex 上 " 
1d= "searchTex ヒ 上" Ya1ue=" 県 ">< わ エ > * 
<1npu type= "buton" 1d= "ohecjkButton" Ya1ue=" 検 索 す る "> 
</ Form> 
<d ュ で 1d="resu1 上 "> 結果 :</d1 マ > 
</body> 
</htm1> 


Re7WXg&e7 直 月 旧 main.js 
w1ndow.on1oad = Function( ) { 
documen . getE] ementByTdq ("checkBuEton" ) .onc1iok = Funotion ( ) { 
Var ex = qdocument .getE1ementByTdq ( "targetTex ヒ " ) .Va1ue: 一 名 
Var Str = document .getE1emenEtByTdq ( "searchTex 上 " ) .Ya1ue: 一 凡 
var ptr = て ext .indexOF (st て, 0) : 一 回 
if (ptr < 0) {一 回 
document . getE1ementByTd ( "resu1 ヒ " ) . 1nnerHTMT 
})e1set 
document . getE1ementByTd ( "resu1 ヒ " ) . innerHTMT 
(pt 上 ェ +1 ) +" 文字 目 で 見 つか り ま し た " : 





" 見 つか り ま せん で し た 『" : 


に 


… 検 索 対象 の 文字 列 を 読み 出す 

… 検 索 文字 列 を 読み 出す 

… 文 字 列 の 最初 か ら 検索 を 行う 

…「indexOf(」 の 戻り 値 が 「-1」 の 場合 は 文字 列 が な か っ た こと に な り 、「0」 以 上 の 場合 は 文字 列 が 見 つか っ た こと に な 
る の で 、 そ れ ぞ れ 処 理 を 行う 


(@ 醒 和 請 個 租 文 字 列 を 検索 する に は 「indexOfO)」「lastIndexOf()」 を 使う 


文字 列 を 検索 する に は 、「indexOf()」 ま た は 「lastIndexOf()」 を 使い ます 。 「indexOfO」 は 、 文 字 列 の 
先頭 か ら 検索 し て 見 つか っ た 位置 を 返し ます 。 「lastIndexOf()」 は 、 文 字 列 の 未 尾 か ら 検 索 し て 見 つか っ 
た 位置 を 返し ます 。 また 、 検 索 位置 を 指定 する こと で 文字 列 の 途中 か ら 検索 する こと も で きま す 。 文字 列 
が 見 つか ら な か っ た 場合 は 「- 1」 を 返し ます 。 


な お 、 よ り 高 度 な 検索 を 行い た い 場 合 に は 、 正 規 表現 が 利用 で きる 「matchO」 を 利用 し ます (274 ペ ー 
ジ 参 照 ) 。 
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条件 に マッ チ す る 文字 列 や 
数 値 が ある か 調べ る 





選 判 放 60- ヨ 1dVHO 











言語 名 : java ped ruby Jython 
| IM で 始ま る 文字 列 に マッ チ す る 単語 大 肌 べ る ト 














言語 名 : java perl ruby ython 

































1 個 見 つか り ま し た 。 








コン ピュ ー タ | 保護 モー ド : 無効 





ボタ ン を クリ ッ ク 「ru」 で 始ま る 文字 列 
する と … の 数 が 表示 され る 


ReWXe@e7 当 目 朋 昨 index.htm 


で 交 ま る 到 務 列 に マッ チ す る 単 く る 、 |] 























曽 コン ピュ ー タ | 保護 モー ド : 無効 





< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 


<htm] > 
<head> 


<meta h ヒ tp-equ1 マ = "ConEen ヒ 上 ype" Conten= "tex 上 /htm] : 


CharSe=uF-8"> 


< 上 it 上 1e>JavaSoript Samp1e< / モ 1 上 1e> 


<11ink re]="stylesheet" type="Etext/css" hrefF="main.oss" 


media="a11 "> 


く 8SC エ 1p ヒ 上 ype=" ヒ ex / る で aSC エ 1 や 七 " S エ o="ma1n . 8 "></ SC エ 1p セ > 


</head> 
<body> 


<Form action=" ./check . Cg1" method= "get" name="mainForm"> 
言語 名 :<1nput type="ext" name="1angName" 
1d="1angName" va1ue= "ava per1] ruby JyEhon "> 
<1nmpu 上 ype= "buton" 1d="ocheclkBuEon" 
Ya1ue= "て u で 始ま る 文字 列 に マッ チ す る 単語 を 調べ る "> 


</ Form> 


<d1Y 1d="resu1 ヒ "> 結果 :</d1 マ > 


</body> 
</htm1 > 





Re:e ヨ mee 可 所 目 用 | 本 WE 二村 輝 main.js 


w1ndow.on1oad = Funotion ( ) {【 
document . getE1ementByTq ( " checkBuEon" ) .onc1iock = fFunoction( ) { 
Yar ex 上 = qoocument .getE1ementByTd ( "1angName" ) .va1ue: 一 禄 
Ya エ eSu] 上 Array = ex .maoh ( / エ ru+/g1i ) : 一 話 
document . getE1ementByTqd ( "resu1 モ " ) .1nnerHTMTL = 
eSu1 上 Aray . 1 ength+ " 個 見 つか り ま し た 。 " : ォ + ジ 





頭 検索 対象 の 文字 列 を 読み 出す 
話 「match()」 を 使っ て 「rul」 の 文字 で 始ま る 文字 列 を 検索 する 


(@jjg】 軸 貞 上 規 表現 を 使っ て 検索 する に は 「match()」 を 使う 


正規 表現 を 使っ て 検索 する に は 、「match()」 を 使い ます 。 正規 表現 を 利用 する と 、 複 維 な 条件 に マッ チ 
する 文字 列 を 検索 する こと が で きま す 。 「match(/ab/)」 と する と 「ab」 の 文字 が 含ま れる 文字 列 に マッ チ 
し ます 。 た だ し 、 複 数 マッ チ す る 場合 で も 最初 の 1 つ に マッ チ し た 時 点 で 検索 が 終わ り ます 。 文字 列 全 体 を 
検索 する 場合 に は 、「g] オ プシ ョ ン を 付加 し て 「match(/ab/g)」 の よう に 指定 し ます 。 「ab]」 だ け で な く 
「Ab」 や 「aB」 な ど 大 文字 小文字 に 関係 な く マ ッ チ させ た い 場 合 に は 、「i] オ プシ ョ ン を 付加 し て 「match 
(/ab/i)」 の よう に 指定 し ます 。 

JavaScript で 利用 で きる 正規 表現 の パタ ー ン は 、 下 表 の よう に な り ま す 。 





慎 紋 40 -3 ヨ IdYHO 


内 容 





任意 文字 に マッ チ ( 改 行 は 除く ) 


復帰 文字 に マッ チ 





[文字 ] 


[] 内 に ある 任意 文字 に マッ チ 
[内 以外 の 任意 文字 に マッ チ 


1 文字 の 区 切り 文字 に マッ チ 
([YfYn\r\t\v] と 同じ ) 








文字 | 文字 


| で 区 切ら れ た 任意 文字 に マッ チ 





文字 *※ 
文字 + 


0 個 以上 の 出現 で マッ チ 
1 個 以上 の 出現 で マッ チ 


区 切り 文字 以外 の 1 文字 に マッ チ 
([Yf\n\r\t\v] と 同じ ) 





タブ 文字 に マッ チ 








文字 ? 


0 また は 1 個 の 出現 で マッ チ 


垂直 タブ 文字 に マッ チ 








文字 値 


値 の 指定 個数 で マッ チ 





文字 | 値 」 


値 の 指定 個数 以上 で マッ チ 





英 数 文字 に マッ チ 
([A-Za-z0-9_] と 同じ ) 








文字 ( 値 1. 値 2| 


値 1 一 値 2 の 指定 範囲 で マッ チ 


英 数 文字 以外 の 文字 に マッ チ 
([^A-Za-z0-9_] と 同じ ) 








< 文字 


先頭 の 文字 に マッ チ 


支 ( 数 値 ) 番 目 の 文字 列 (.…) に マッ チ 





文字 $ 


末尾 に マッ チ 


8 進数 の 値 に マッ チ 





文字 \b 


空白 で 区 切ら れ た 単語 に マッ チ 


16 進 数 の 値 に マッ チ 





文字 \B 


空白 で 区 切ら れ て いな い 単 語 に マッ チ 


「.」 の 文字 





\c 文 字 


コン トロ ー ル コー ド の 文字 に マッ チ 


「-」 の 文字 





\d 


数 値 に マッ チ ([0-9] と 同じ ) 


「\」 の 文字 





\D 


数 値 以 外 の 文字 に マッ チ 
([^0-9] と 同じ ) 


「/」 の 文字 








導 


フォ ー ム フィ ー ド の 文字 に マッ チ 





\n 





改行 文字 に マッ チ 


グル ー プ 化 (マッ チ デ ー タ は 
RegExp.$1-9 で 取り 出せ る ) 
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呈 上 文字 列 を エン コー ド / デ コー ド す る 





慎 放 60-3 コ IdYHO 目 目 | 





ここ で は 、 文 字 列 を エン コー ド / デ コー ド す る 方 法 に つい て 解説 し ます 。 














文字 列 の エン コー ド / デ コー ド の チェ ッ ク 


文字 : #mz-80K2E9%21%621 












ぐ の こら ーー = 
KJ 12 ccsoprse IP vesearh 。。 6 





>> 目 








ボタ ン を クリ ッ ク す る と … 
文字 : #mz-80K2E%219%21 
デコ ー ド する | 


文字 列 の エン コー ド / デ 
コー ド 結 果 が 表示 され る 


エン コー ド 結 果 : 9%23mz-80K2E962321962321 





凍 コン ピュ ー タ | 保護 モー ド : 無効 


SeW:Xd 事 %e り ヨ 目 上 用 上 index.htm 


<!DOCTYPE htm1 PUBLITC "-//W3C//DTD HTML 4.01 Transi1ona1 / /EN"> 
<htm1 ユ > 
<head> 

<meta hp-equ1 マ = "ConEen ヒ 上 ype" Conten セ ヒ = "ex 上 /htm1] : 

CharSe ヒ =uEF-8"> 

< セキュ 上 1e>JaVaSor1p ヒ Samp1e</ ヒ 1 上 1e> 

<1inljk re]="sty1eshee" type="Eex/css" hrefF="main.css" 

media="a11"> 

<SC エ ip type=" ヒ ex / aVaSC エ 1 上 " S エ o= "ma1m .S "></ SC エ 1Dp ヒ > 


</head> の 


< く boOdy> 
<h1 > 文字 列 の エン コー ド / デ コー ド の チェ ッ ク < /h1> 
<fForm action=" ./cheok . cg1" method="get" name="mainForm"> 
文字 :<1nput type="Eext" name="convCode" 1d="convCode" 
Ya1ue=" 振 mz-80K2 世 名 21 も 21 "><D エ > 
<1npu type= "button" 1d="ocheckButton1" va1ue= "エン コード する "><b エ > 
<1npu type= "buton" 1d="checkBuEton2" Ya]1ue= "デコード す る "> 
く / Form> 
<d1iV 1d="reSu1 モ "> 結果 :</d ュ マ > 
</ body> 
</htm1] > 


SOURCE CODE 1 剛 較 main.j5 


window.on1oad = fFunotion( ) { 

document .getE1ementByTqd ( "checkButEon1" ) .onc1iock = fFunotion( ) { 
Var tex = document .getE]ementByTq ( "ConvCode " ) .a1ue : 
Var enoTex 七 = encodeURTComponen (ex) : 一 視 有 
document .getE1ementByTdqd ( "resu1t" ) .1innerHTMT, = = 
"エン コー ド 結 果 :"+encTex: 

} 

document . getE1ementBy エ Td ( "checkBuEon2" ) .onc1ick = Function( ) { 
Var て tex = qoocumenrnt .gdetE]ementByTd ( "convCode " ) .Ya1ue: 
var encTex = qdecodeURTComponent (tex) : 一 峰 
document . getE1ementByTd ( "resu1 ヒ 上 " ) . 1nnerHTMT, = "デコ ー ド 結果 :"+encTex : 


} 





} 


頭 文字 別 を エン コー ド す る 
話 文字 列 を デコ ー ド する 








(⑯ 損 3) 右 秀 エン コー ド / デ コー ド に は 「encodeURIComponent()」「decodeURIComponent()」 を 使う 


CGI な ど に 日 本 語 や 記号 な ど を 含む データ を URL 文字 列 と し て 送信 する 場合 、 エ ンコ ー ド 処理 を 行う 必 
要 が あり ます 。 JavaScript に は 、 エ ンコ ー ド デコ ー ド 処理 を 行う メソ ッ ド が いく つか 用意 さ れ て いま す 
( 下 表 参 照 )。 た だ し 、 古 い ブ ラウ ザ で は 、「escape()」「unescape()」 し か 利用 で き な い 場合 が あり ます 。 
エン コー ド 処 理 を 行う メソ ッ ド は 、 そ れ ぞ れ ど の 文字 列 を エン コー ド す る か が 異な っ て いま す 。 た と えば 、 
「encodeURIComponentO」 で は [:」「/」「」「:H「@」「S」「=」「+」「$]「.」 の 文字 まで エン コー ド さ れる の 
で 、 こ れ ら の 文字 を エン コー ド し た く な い 場 合 は 、「encodeURI(」 を 使い ます 。 


5 ヨ ーー ド なー 
escape () unescape () 
encodeURI() decodeURI() 
encodeURIComponent() decodeURIComponent() 
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1 2 1 文字 すず つ ペ ー ジ 上 に 文字 を 
表示 し て クリ ッ ク で 一 括 表 示す る 








党 判 60-3 ヨ ldVHO 





ここ で は 、] 文 字 す ずつ ペー ジ 上 に 文字 を 表示 し つつ 、 表 示 領 域 を クリ ッ ク し た と き に は 一 括 表示 する 方 法 に つ 
いて 解説 し ます 。 














管理 人 か ら の メッ セー ジ 















ボタ ン を クリ ッ ク す る と … 
文字 が 1 文字 ずつ 表示 され 、 文 字 
表示 領域 を クリ ッ ク す る と すべ て 
の 文字 が 一 括 し て 表示 され る 







本 日 は よう こそ いら っ し ゃ いま し た 。 ど う ぞ 





SeWX 事 ee) り 当 目 用 目 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<mea htp-equ1Y= "ConEen ヒ -type" conten モ =" tex 上 /htm1 : 
CharSe ヒ =uF-8"> ュー 
< 上 1 上 1e>JavaSor1ip Samp1e</ 上 ヒュ 1 ヒ 1]e> 
<1ink re]1="styleshee" type="Eex 上 /css" hreF="main.css" 
media="a11 "> 
く 8SC エ 1p 上 上 ypDe= "上 xx 上 / JaVaSC エ 1p ヒ "5 エ C="main . 8S"></ SC エ 1p セ > 
</head> 
くわ body> 
<h1 > 管理 人 か ら の メッ セー ジ </h1> 
<Form ac1ion=" . /cheok .Cg1" method="get" name= "mainForm"> 
<1npu 上 ype="button" 1qd="dispBuEon" ya1ue=" 表 示 "> 
< く / Form> 
< く d1iV 1d=" エ eSu] 上 ">ーーー</d ュ 1Y ッ > 一環 
</body> 
</htm1 > 





頭 文字 列 の 表示 領域 を 指定 する 





ge 当 目 用 用 本 RS 半 ゆ mainjs 


window .on1oad = Funotion( ) { 
document . getE1emenByT エ Td ( "dispButEon" ) .onc1ick = Funoction ( ) 【 
meSssage . S 上 ar ("resu1 七 ", @ ヽ 
"本 日 は よう こそ いら っ し ゃ いま し た 。 どう ぞ ご ゆっ くり と し て いっ て くだ さい 。 " ) : すず 
ま 
} 
Var messagde = { 
oneChar : fFunotion( ) { 
document . getE1emenEByTd (this . ou モ 上 TD) . innerHTMT, = 続 
this .text . Subst 上 r(0, his .Coun 七 ) : の 
this . Coun 七 ++: a 
ifF (this.coun 上 <= this .Eext . 1ength ) っ 固 
setTimeout ( "message . oneChar()", 100) 
玉 
a11Char : Function( ) { 
documen . getE1ementByTq (message . ou 上 TD) . innerHTMT, = っ 回 
mesSage . 上 ex : + ォ ご 
messagde .Coun = message・.Eext . 1ength : 
}, 
Star : Funotion (oTD, st と ) { 
上 h も 8 。 も @xx も = g ヒ エッ 
this.coun = 0: 
this .outTD = oTD: 
document . etE1emenEtByTd (this . ouE 上 TD) .onc1iock = message .a11Char: 一 攻 
setTimeout ( "message . oneChar( ) ", 100): 一 回 


+ー 


… 文 字 列 を カウ ンタ で 示さ れる 数 だ け 表 示す る 

… 文 字 列 が 全部 表示 され て いな い 場 合 の み タ イマ ー を 設定 し 表示 処理 を 行う 
… す べ て の 文字 列 を 表示 する 処理 

- ク リッ ク 時 に すべ て 表示 する 処理 を 呼び 出す 

…1 文字 ずつ 表示 する 処理 を 0.1 秒 後に 呼び 出す 


ロロ ロロ 避 中 


⑯ 可 滑 計 】 晶 秀 SetTimeout()」 を 使っ て 定期 的 に 文字 を 表示 する 


] 文字 すず す つ ペー ジ に 文字 列 を 表示 する に は 、 タ イマ ー を 利用 し ます 。 JavaScript の タイ マー に は 
「setTimeout()」 と 「setlInterval()」 の 2 種類 が あり ます が 、 処 理 に 終わ り が ある 場合 に は 「setTimeout 
()」 を 使う 方 が 安全 で す 。 文字 列 の 表示 に は カウ ンタ を 用 意 し 、 文 字 列 の 表示 位置 を 示す よう に し ます 。 タ 
イマ ー で 定期 的 に カウ ンタ を 増やし 、 文 字 列 を 表示 し て いき ます 。 カウ ンタ の 値 が 文字 列 よ り も 少な い 場 








合 は タイ マー を 設定 し て 繰り 返し 表示 処理 を 行い ます 。 
クリ ッ ク 時 に すべ て の 文字 列 を 表示 する に は 、 表 示 領 域 に クリ ッ ク イ ベン ト (onclick) を 指定 し ます 。 イベ 
ント が 発生 し た ら す べ て の 文字 列 を 表示 し 、 カ ウン タ を 文字 列 長 と 同じ に し ます 。 
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ealkeN 間 昌 | 
12] ペー ジ が 読み 込ま れ た だら 
更新 情報 を ペー ジ 内 に 流し 込む 
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120 


ここ で は 、 ペ ー ジ が 読み 込ま れ た タイ ミン グ で 、 指 定 し た 領域 に キス ト フ ァイル の デー タ を 流し 込む 方 法 に 
つい て 解説 し ます 。 



















ヘッ ダー を 読み 込み 中 .… 





ーー | 





本 文 酎 あみ 込 み 中 -… 











@O: の hey/ne21681 >|5|x 


3w 人 c | @wasorpt sampe | 1 


Live Sx Search_ お 


】 




















更新 情報 
イブ ラリ を 使え ば 複雑 ね な 処 理 も 簡単 





人 W イン ター ネッ ト | 保護 モー ド : 有 












prototypejs と jQuery の 最新 版 が 出 ま し た | 





ペー ジ が 読み 込ま れる と 、 そ れ ぞ れ JavaScqpt ラ イブ ラリ の 中 で 最も 多く 利用 され て いる 


に の が prototypejs で す 。 
の 領域 に テキ スト /HTML 
rimo 新しい パー ジョ ン に な り 、 階 構造 を 持っ た RTNAL 文 
書 に アク セス し や すく な り ま し た 。 


prototypejs よ り も コン バク ト で 両機 能 な ライ ブラ リ が 
jQuery で す 。 是非 お 試し くだ さい 。 








人 ⑳ イン ター ネッ ト | 保護 モー ド : 有効 


Seamwe り 当 目 用 | 馬 央 珍 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 


<me ヒ a h ヒ 上 ウー@Gqdu1 マ = "で OnE6n ヒ 上 ype" ご onen ヒ = リモ ex モ /htm1 : 
Cha エ SeG ヒ =utF-8"> に < 
< ヒュ 上 1e>JaVa8C エ ip 上 Samp1e< / モ ヒュ ヒ ]e> 
<11ink re1="styleshee" type="texE/oss" hrefF="main.css" 
med1ia="a11 "> 8 
で ぐ 8SC エ 1D ヒ 上 上 YDe=" 七 Gx 七 / ] る で aSC エ 1D 七 " SC= "や エ oOEoype . 8 "></ SC エ 1D ヒ > 
く SC エ 1D 上 YDe= " ヒ x 七 / る で aSC エ 1D 七 " SC= "ma1m . 8"></ SC エエ 1Dp ヒ > 
</head> 
<Dbody テ > 
<h1 > 更新 情報 </ ロ 1> 
<d ュ で 1d="header"> ヘ ッ ダ ー を 読み 込み 中 . . . .</dQ1 マ > 選 


<d1iV 1qd="1nFo"> 最 新 情報 を 読み 込み 中 . . . . </d1 マ > 
<d1iV 1d="message "> 本文 を 読み 込み 中 . . . .</d1i マ > 
</ body> 
</htm1> 





攻 ファ イル を 読み 込む お 領域 を 指定 する (ID 名 も 指定 し て お く ) 


gg 委 上 上 用 EYE 凍 あ mainjs 


window.on1oad = funoction( ) { 
new AJjax.Updater ("header" , "header . モ 上 x 上 " ) : 一 名 
new AJax .Updater ("info" , "info. モ x キ " ) : 一 略 
new Ajax .Updater ("message", "message . モ xt" ) : 一 回 


い @)9|(@= 
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+ー 


…|D 名 「headerl の タグ に header.txt フ ァイル を 流し 込ん で 表示 する 
…ID 名 「info」 の タグ に info.txt フ ァイル を 流し 込ん で 表示 する 
…ID 名 「message」 の タグ に message.txt フ ァイル を 流し 込ん で 表示 する 


回 回 回 


(@ 損 抽 計 上 電 同 期 で ペー ジ 内 に テキ スト /HTML フ ァイル を 表示 する に は 「new Ajax.Updater()」 を 使う 


非同期 で ペー ジ 内 に テキ スト /HTML フ ァイル を 表示 する に は 、prototype.jS ラ イブ ラリ の 「new 
Ajax.Updater()」 を 使う と 簡単 で す 。 「new Ajax.Updater()」 の 最初 の パラ メー タ に 読み 込む タグ の ID 
名 を 指定 し ます 。 2 番目 の パラ メー タ に は 、 読 み 込 む フ ァイル の URL を 指定 し ます 。 た だ し 、 セ キュ リティ の 
都合 上 、 同 一 ドメイン 、 同 一 サー バー 上 に ある ファ イル し か 読み 込む こと は で きま せん 。 








@ 抽 M) 回 租 nternet Explorer7 で は 「XMLHttpRequestl が 使え る 


Internet ExplorerG ま で は Aotive X を 利用 し て 非同期 通信 を 行っ て いま し た が 、Internet ExplorerZ 
か ら は 他 の ブラ ウザ と 同様 に [XMLHttpRequest」 を 使う こと が で きま す 。 た だ し 、「XMLHttpHequest」 
は ブラ ウザ に よっ て 利用 で きる イベ ント や プロ パテ ィ が 異な る の で 注意 が 必要 で す 。 
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部 Break Time 


文字 列 の 連結 を や め て 「join)」 を 使っ て 
実行 速度 を 上 げ る 


JavaSoript で は 、「+」 記 号 を 使っ て 手軽 に 文字 列 の 連結 を 行う こと が で きま す 。 と ころ が 、 
Internet Explorer で は 、 こ の 文字 列 の 連結 が 非常 に 低速 な 処理 と な り 、 実 行 速度 を 低下 させ て し ま 
うこ と が あり ます 。 この よう な 場合 に は 連結 する 文字 列 を 一 度 ま と め て 配列 に 入れ て お き 、 最 後に 
「join ()」 で 連結 する よう に し ます 。 これ で 、 だ いた い 100 倍 ほど 処理 速度 が 向上 し ます 。 た だ し 、 他 の 
ブラ ウザ で は あま り 効 果 が あり ませ ん 。 


wtndow.on1oad = Funoction ( ) { 
ECE (= の 9 な 
S = new Date() : 
For (Var =0: 1<100000: 1++) { 
txE += "Samp1e tex 上 , 『": 
} 
e = new Date() : 
tm1 = (e- ぉ ) / 1000: 


選 計 2 三 z 

S = new Date() 

For (Var =0: 1<100000: ++) { 
ExE2 [1] = "Samp1e exE, ": 

} 

2cE 多 。 三 : 著 3 も 2 。 ゴ OHm(" ") 

e = new Date( ) : 

tm2 = (e-s) / 1000: 


document . getE] ementByTd ( "time" ) . innerHTMT, = tm1+ "<b エ > リ +m2 : 
※Internet Explorer で この サン プル を 


- 旋 j t Sample - Winc Explore 己 ] 実行 する と 処理 に 時 間 が か か る の で 注 
て の ・ 8 で ma コラ ym | ヶ |x」 Le search 意 し て くだ さい 。 


wa の に |3。 |me | | 信 ・ 加 ・ FT 

















サン ゴル 


Internet Explorer で は 、「join()」 


156.745 " 
MK を 使っ た 方 が 実行 宮 度 が 速く な る | 















CHAPTER- 10 


日 付 / 時 刻 
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ekeN 間 | 





用 現在 の 日 付 を 表示 する 


ここ で は 、 ペ ー ジ を 表示 し た 時 点 の 日 付 を 、 西 暦 の 年 月 日 と 曜日 で 表示 する 方 法 に つい て 解説 し ます 。 




















slxleesse 


| | 食 ・ 回 ・ 下 ・ 


づつ ||2 ceeers 


次 補 | 因 avaScnpt Sample 








ペー ジ が 読み 込ま れ た 
時 点 で の 日 付 が 表示 
され る 














商 コン ピュ ー タ | 保護 モー ド : 無効 


SeWeee 当 目 用 用 同軸 了 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta h 上 D-eGqu1i マ = "ConEen ヒ -type" conten= "上 ex 上 /htm1: 
CharSe ヒ =utF-8"> 
< 上 ュ 上 1e>JaVaSc て ip 上 Samp1e</ ヒ 1 上 ]e> 
<1ink re]="sty1esheet" type="text/css" hrefF="main.oss" 
media="a11 "> 
く 8Cr1pt 上 ype= "上 ex / JaVa8C エ 1p 上 " Sro="ma1in . 8S"></ SC エ 1p ヒ > 
</head> 
< くわ body> 
<p> 今 日 は <span 1d= "Cu と rentDate"></ span> で す 。 </p> 一 斑 
</ body> 
</htm1> 








頭 日 付 を 表示 する 領域 を 用 意 する 











eXeSeg 当 目 朋 目 main.js 


window.on1oad = Funotion ( ) { 
var dateOb] = new Date() : 一 
var y = qateOb〕j . getFu11Year( ) : 一 話 
Var m = dateOb] . getMonth ( ) + 1: 一 回 


Yar dQ = qateOb〕 . getDate ( ) : 一 話 

var yb = "日 月 火 水 木 金 土 " .charAt (dateOb] . getDay ( ) ) : 一 回 
document . getE1 ementByT エ dQ ( "Cu エエ enEDae" ) . innerHTMT, = 

Y+ "年 "+m+ "月 "+d+" 日 ("+yb+" ) " * ) 回 


トー 


"日 付す ブ ジ ェクト を 生成 する 

…「getFullYear()」 で 西暦 年 数 (4 桁 ) を 読み 出す 

…「getMonth()」 で 月 を 読み 出し て 「 1 」 を 加算 する (「getMonth()」 で 取得 で きる 値 は 実際 の 月 より 1 少な く な る た め ) 
…「getDate()」 で 日 に ち を 読み 出す 

…「getDay()」 で 曜日 を 0 一 6 まで の 数 値 で 取得 し 、 そ れ を キー に し て 「charAt()」 で 曜日 の 文字 列 か ら 抜き 出す 

… 日 付 を 文字 列 と し て 連結 し ペー ジ 上 に 表示 する 








@ 損 抽 】 映 租  Date」 オ ブ ジ ェクト の 各種 メソ ッ ド を 使っ て 日 付 情報 を 読み 出す 
現在 の 日 付 を 読み 出す に は 「Date」 オ ブ ジ ェクト を 生成 し ます 。 「Date」 オ ブ ジ ェクト は 生成 され た 時 点 
で の 日 付 情報 で あり 、 リ アル タイ ム に 変化 する こと は あり ませ ん 。 リ アル タイ ム に 日 付 情報 を 取得 する 場合 
に は 、 毎 回 、「Date」 オ ブ ジ ェクト を 生成 する 必要 が あり ます 。 
生成 され た 「Date」 オ ブ ジ ェクト か ら 日 付 情報 を 読み 出す に は 、 下 表 の 各種 メソ ッ ド を 利用 し ます 。 

















getFullYear() | 西暦 年 数 (4 桁 ) を 取得 する 
getDate () 日 に ち を 取得 する 
注意 し な いと いけ な い の は 、 月 を 示す 「getMonth()」 で す 。 これ は 、 実 際 の 月 より も 「 1」 少 な い 値 を 返 
す た め 、 表 示す る 際 に は 「1」 を 加算 する 必要 が あり ます 。 
また 、 曜 日 を 示す 「getDay()」 は 、 曜 日 に 応じ て 0ー6 ま で の 数 値 を 返し ます 。 これ は 下 表 の よう に 曜日 


と 対応 し て いま す 。 曜日 を 表示 する 場合 に は 、 あ ら か じ め 配 列 に 曜日 を 示す 文字 列 を 入れ て お く か 、 サ ンプ 
ル の よう に 文字 列 内 か ら 抜き 出す よう に し ます 。 





















肖 


肖 胃 用 上 


問 還 
半 上 


1 


有用 目 目 目 目 上 
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sEcTION 旧 議 (し Hzwreor[ 2s] 
| 及 ( 現 在 の 時 刻 を 表示 する 














ここ で は 、 ペ ー ジ を 表示 し た 時 点 の 時 刻 を 、 時 分 秒 で 表示 する 方 法 に つい て 解説 し ます 。 




















km 

計 ペー ジ が 読み 込ま れ た 時 上 
で の 時 刻 が 表示 され る 

選 

や 

o/ 商 コン ピュ ー タ | 保護 モー ド : 無効 

日 

付 

時 

刻 


SeiWXee 当 上 用 用 馬 語 際 index.htm 





< く !DOCTYPE htm1] PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 
<meta htDp-equ1 マ = "ConEen ヒ - 上 ype" Conten ヒ = "tex 上 /htm1 : 
CharSet=utF-8"> 『 
< モ ュ 1 上]e>JavaSor1p 上 Samp1e</ ヒ 1 上 1]e> 
<1ink re1="styleshee ヒ " type="texE/css" hreF="main.Css" 
media="a11 "> 
く 8C エ 1D 上 上 yDe=" ヒ @Gx ヒ / Ja マ a8C エ 1p 上 "5S エ = "main .S "></ SC エエ 上 > 
</head> 
<body テ > 
<h1>We1ocome ! </h1> 
<p> こ の ペー ジ に アク セス し た 時 刻 は <span 1q= "ourrenT1me"></ Span> で す 。 </p> 一 斑 
</body> 
</htm1> 


時 刻 を 表示 する 領域 を 用 意 する 


286 





SeXeee り 当 目 用 | 本 RS 二村 mainjs 


window.on1oad = Funotion( ) { 
var qateOb〕 = new Date( ) : 一 名 
var h = qateOb〕] . getHours ( ) : 一 上 
Yar m dateOb〕] . getMinutes ( ) : 一 回 
Var s = dateOb] . getSeconds ( ) : 一 話 
document . getE1emen モ ByTd ( "currentTime" ) . innerHTMT, = = ゝ EE:」 
h+ "時 "+m+ "分 "+S+" 秒 ": * デ 

} 











頭 日 付 オ ブ ジ ェクト を 生成 する 
話 「getHours()」 で 時 を 読み 出す 
回 「getMinutes()」 で 分 を 読み 出す 
回 
回 














…「getSeconds()」 で 秒 を 読み 出す 
… 得 られ た 時 刻 を 文字 列 と し て 連結 し ペー ジ 上 に 表示 する 


@ 加 ge】 映 前 | Date」 オ ブ ジ ェクト の 各種 メソ ッ ド を 使っ て 時 刻 情報 を 読み 出す 


現在 の 時 刻 を 読み 出す に は 、「Date」 オ ブ ジ ェクト を 生成 し ます 。 「Date」 オ ブ ジ ェクト は 生成 され た 時 点 
で の 時 刻 の 情報 で あり 、 リ アル タイ ム に 変化 する こと は あり ませ ん 。 リ アル タイ ム に 時 刻 情報 を 取得 する 場 
合 に は 、 毎 回 、TDate」 オ ブ ジ ェクト を 生成 する 必要 が あり ます 。 

生成 され た 「Date」 オ ブ ジ ェクト か ら 時 刻 の 情報 を 読み 出す に は 、 下 表 の 各種 メソ ッ ド を 利用 し ます 。 

メソ ッ ド 
getHours () 時 を 取得 する 
getMinutes () 分 を 取得 する 
















getSeconds () 秒 を 取得 する 
getMilliseconds () ミリ 秒 を 取得 する 





(Wiil 骨 | Date」 オ ブ ジ ェクト に 設定 し た 日 付 や 時 刻 


「Date」 オ ブ ジ ェクト は 日 付 や 時 刻 を 読み 出す だ け で な く 、 設 定 す る こと が で きま す 。 な お 、「Date」 オ ブ 
ジェ クト に 設定 し た 日 付 や 時 刻 は シス テム (コン ピュ ー タ ) の 日 付 / 時 刻 に は 影響 を 与え ませ ん 。 あく まで も 
「Date」 オ ブ ジェ クト 内 の 日 付 / 時 刻 の 設定 に な り ま す 。 


setFullYear 西暦 年 を 設定 する 
setMonth 月 を 設定 する 
setDate 日 に ち を 設定 する 
setTime 時 間 を 設定 する 
setHours 時 を 設定 する 
setMinutes 分 を 設定 する 
setSeconds 秒 を 設定 する 
setMilliseconds ミリ 秒 を 設定 する 
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SECTION 上 (し JCnAmrewnor [ji24] 


| 肪 民 』n 日 後 を 求め る 


ここ で は 、 テ キス ト フ ィ ー ル ド に 入力 し た 日 数 を 現在 の 日 付 に 加算 する 方 法 に つい て 解説 し ます 。 
























貞 コン ビ ピュータ | 保護 モー ド : 





日 数 を 入力 し て ボタ ン を 
クリ ッ ク す る と … 


活 需 \ 病  01-3 コ IdYHO 目 目 邊 昌 上 | 


3 日 後 は 「2007 年 4 月 3 日 CK)」 で す 


現時 点 で の 日 付 に 入力 し た 
日 数 を 加算 し て 表示 され 





剖 コン ピュ ユー タ | 保護 モー ド : 無効 





Se7Walsei 当 目 用 同軸 珍 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4.01 TransiEiona1 / /EN"> 


<htm1]> 
<head> 
<meta hEp-equiY=" Conten ヒ -type" conEen ヒ = "tex モ 上 /htm1: 
CharSe ヒ =utF-8"> リー 


< セキュ ヒ 上 1e>JavaSoCrip Samp1e</ ヒ 1 上 1e> 
<1ink re]="sty1eshee" type= "texE/css" hreF="main.css" 
media="a11 "> 
く SC エ 1Dp 上 上 De= "上 Gxx / ]a マ aSC エ 1p 七 " SC="main . 8 "></ SC エ ュ 1p ヒ > 
</head> 
<Dbody> 
<Form action=" ./cheok . Cdg1" method= "gdet 上 " name="mainForm"> の 





の 


日 数 :<1nput type="tex" name="dateCoun" 
ュ 1d= "dateCoun 七 " で a1ue="3"> 4 
<1npu 上 ype= "button" 1d= "checkButEon" Ya1ue="n ロ 日後 を 求め る "> 
</ Form> 
<d1V 1d= "resu1 モ "> 結果 :</d ュ マッ > 
</body> 
</htm1> 


MS)9IX@ 事 


ETI main.js 


w1ndow.on1oad = fFunotion ( ) { 
document .getE1emenEtByTd ( " checkBut て on" ) .onc1iok = Funotion ( ) { 

Var do = qoocumen .getE1ementByTdq ( "dateCoun キ " ) .Va1ue : 一 名 
do = parSeTnt (dcC) 
if (isNaN(dc) ) { al1ert ( "入力 エラ ー" ) : returnz: } 
var dateOb] = new Date() : 
var oday = qateOb] . getTime ( ) : 一 許 
Var mSeC = dC *※ (24 * 60 * 60 * 1000): 一 回 
Var newday = new Date (today+mseoc) : 一 話 
Var y = newday .getFu11Year() 
Var m = newday .getMonth() + 1: 
Var dQ = newday .getDate( ) : 
var yb = "日 月 火 水木 金 土 " .charAt (newdlay . getDay ( ) ) : 
document . getE]emenEtByTd ( "resu1 上 " ) .1nnerHTML,。 = 
do+ " 日後 は 「"+y+ "年 "+m+ "月 "+d+" 日 ("+yb+" ) 」 で す ": 





トー 














する (これ に より 指定 され た 経過 秒 数 の 「Date」 オ ブ ジ ェクト が 生成 され る ) 


(@ 抽 中 租 [Date」 オ ブ ジ ェクト の | 数 に 経過 秘 数 を 指定 する 


指定 し た 経過 日 数 を 求め る に は 現在 の 日 付 を 示す 経過 秒 数 (1970 年 1 月 1 日 か ら の 経過 ミリ 秒 ) と 、 求 
め る 日 数 を 示す ミリ 秒 を 加算 / 減 算 し ます 。 この 値 を 「Date ()」 パ ラメ ー タ と し て 指定 し 、 新 た な オブ ジェ ク 








ト と し て 生成 し ます 。 あと は 、「getYear0」 や 「getMonth()」 な ど で 日付 情 報 を 読み 出す こと が で きま す 。 
「Date」 オ ブ ジ ェクト は 内 部 で は 1970 年 1 月 1 日 か ら の 経過 ミリ 秒 で 計算 され る た め 、 こ の よう な 方 法 
で 手軽 に 日 数 を 計算 する こと が で きま す 。 








頭 入力 され た 日 数 を 取得 する 

話 現在 の 日 付 の 1970 年 1 月 1 日 か ら の 経過 秒 数 (ミリ 秒 ) を 取得 する 

話 取得 し た 日 数 に ミリ 秒 を 乗算 する 

話 現在 の 日 付 の 経過 秒 数 と 入力 され た 日 数 を 秒 数 (ミリ 秒 ) に 変換 し た 値 を 加算 し て 「Date()」 の パラ メー タ と し て 指定 
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SelkeN 間 | (し czgreso [2s] 
| 肪 及 実行 時 間 を 計測 する 











ここ で は 、 プ ログ ラム 実行 時 の 処理 に か か っ た 時 間 を 計測 する 方 法 に つい て 解説 し ます 。 



















| @ conecowkss -| |x luesere 


半 交 vasoptsampe | | 信 ・ 団 -~- 唱 -* 














実行 時 間 の 計測 









回 数 : 10000 









2 cyovesorpcsa ・| な |x lesero 


守 空 | @avasorpt sampe 同 倫 ・ 回 ・ 卓 ・ 

















コン ピュ ー タ | 保護 モー ド : 無効 





実行 時 間 の 計測 
















回 数 を 入れ て ボタ ン を 回 数 : 10000 
クリ ッ ク す る と … 
6 た リ 秒 か か り ま し た 
、 コン ピュ ー タ | 保護 モー ド : 無効 100 
処理 に か か っ た 時 間 が 
表示 され る 
ReWXg 事 eg 当月 用 目 index.htm 





<!DOCTYPE htm1] PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 

<meta htp-equ1 マ = "ConEen ヒ -Eype" conEen ヒ = "ex 上 /htm] : 
CharSe キ =u 上 F-8"> 
< モ 上 ュ 1 上 1e>JavaSoript Samp1e< / 上 上 ]e> 
<1ink re]="sty1eshee" type="Eex 上 /css" hreF="main.CSS" 革 。 
media="a11 "> ( 
く 8SC エ 1D YDe=" 七 人 / ] る で aSC エ 1D ヒ "5 了 C= "ma1n . 8 "></ SC エエ わ ヒ > 


</head> 
<body> の 


<h1 > 実行 時 間 の 計測 </h1> 
<Form action=" ./cheok . Cg1" method= "ge 上 " name= "mainForm"> 
回 数 :<1nput ype="Eex 上 " name=" エ epeaCoun ヒ " 1d="repeatCoun" 。 
va1ue="10000"> 
<1npu 七 上 ype= "bu モ 上 Eon" 1d= "checkBuEon" Ya1ue=" 実行 時 間 を 計測 "> 
く / Form> 
<d1V 1d="reSu1 上 "> 結果 :</d1i マ > 
</body> 
</htm1> 








eXg 事 9e) り 当 目 用 上 グ main.jS 


window.on1oad = funotion( ) { 
document . getE]emenEByTq ("checkButton" ) .onc1ick = Funotion( ) { 
Ya エ ご COun 七 = 
parseTnt (document . getE1ementByTd ( "repeatCounE" ) .Ya1ue) : = 
V&RISIETE。 や "5 
Yar StartTime = new Date() : 一 馴 
Fo (Var 1=0O: 1<count: ュ ++) { 
8 モエ += "JavaSorip Samp1e Text, "+Math .pow(10,20) /2+Math . PT : 
} 
Ya enQdTime = new Date( ) : 一 話 
Yar mseo = enqdTime - startTime: 一 茹 
document . getE1emenEtByTd ( "resu1 モ " ) .1nnerHTMT, = mseo+ "ミリ 秒 か か り ま し た " : 


トー 


… 開 始 時 の 時 間 を 求め る 

… 計 測 し た い 処 理 を 記述 する 

… 終 了 時 点 で の 時 間 を 求め る 

… 終 了 時 刻 か ら 開 始 時 刻 を 減算 し て か か っ た 時 間 を 求め る 


(@ 拓 人 】 晶 租 開始 時 と 終了 時 に 生成 し た 「Date」 オ ブ ジ ェクト の 差分 を 求め る 


処理 に か か る 時 間 を 計測 する に は 、 計 測 開始 時 と 終了 時 に 「Date]」 オ ブ ジ ェクト を 生成 し 、 差 分 を 求め ま 
す 。 生成 され た 「Date」 オ ブ ジ ェクト は 1970 年 1 月 1 日 か ら の 経過 秒 数 ( 三 リ 秒 ) な の で 、 差 分 を 取れ は 処 
理 に か か っ た 時 間 を 求め る こと が で きま す 。 


StartT1me = new Date( ) : 
計測 し た い 処 理 


endT1ime = new Date( ) : 
msec = enqdTime - startTime: 


msec : 処理 に か か っ た 時 間 ( ミ リ 秒 ) 
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リア ル タ イ ム に 時 刻 を 
テキ スト で 表示 する 
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ペー ジ が 表示 され る と 現在 の 時 刻 が 
リア ル タ イ ム に 表示 され る 


(⑳ 当 上 朋 用 上 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 
<me ヒ a hh ヒモ p-equ1Y= "ConEen ヒ -type" conten ヒ ="tex モ /htm1: 
CharSe ヒ =uF-8"> っ 
< ヒュ 1 上 1e>JavaSc エ ip 上 Samp1e</ 七 1 モ 上 1e> 
<1ink re]="sty1esheet" type="tex/css" hreF="main.css" 
med1ia="a11 "> 
く 8C エ 1Dp ヒ 上 ype= " ヒ ex 七 / る VaSC エ 1D 上 "SC= "main . 8 "></ SC エ ュ 1p ヒ > 
</head> 
<body> 
<p> 現 在 の 時 刻 :<span 1d="CurrenET1me "></ SDan>< / や > 
</body> 
</htm1> 





⑨19 く @@ 


9g ョ 当 目 用 用 本 生生 main.js 


w1ndow.on1oad = Funotion( ) { 
myC1ock . time ( ) : 一 罰 
Se 上 Tnterva1 ( "myC1ock. モ time()", 1000) : 一 許 
} 
Var myClock = 
time : Funoction( ) 【 
Yar dateOb] = new Date( ) : 
Yar h = qateOb] . getHours ( ) : 
Ya m dateOb] . getMinutes ( ) : 
Yar S = qateOb] . getSeconds ( ) : 
document .getE1ementByTd ( "CurrentTime" ) . 1nnerHTML, = 
h+" 時 "+m+" 分 "+S+" 秒 ": ご 





副 現在 の 時 間 を 表示 する (この 処理 が な いと 1 秒 ほど 時 刻 が 表示 され な い ) 
話 | 秒 ご と に 時 間 を 表示 する 「myClock.time()」 を 呼び 出す 
話 「Date」 オ ブ ジ ェクト を 生成 し て 時 間 を 求め 、 求 め た 時 間 を ペー ジ 内 に 表示 する 


@jjg】 衣 リアルタイム に 時 刻 を 表示 する に は 「setlnterval()」 を 使う 
リア ル タ イ ム に 時 刻 を 表示 する に は 、「setlnterval()」 を 使っ て 時 刻 を 表示 する 処理 を 呼び 出し ます 。 


「setlInterval()」 の 最初 の パラ メー タ に 定期 的 に 行う 処理 を 記述 し 、2 番 目 の パ ラメ ー タ に 定期 的 に 呼び 
出す 時 間 を ミリ 秒 で 指定 し ます 。 ミリ 秒 な の で 1 秒 ご と に 呼び 出す の で あれ ば 、「1000」 を 指定 し ます 。 





[im 明 先頭 に 0 を 付加 し て 表示 する 


時 間 が 0 まで の 場合 に 、 先 頭 に 0 を 付加 し て 2 桁 で 表示 させ た い 場 合 が ありま す 。 これ は 、 次 の よう に 
文字 と し て 0 を 付加 し た 後に 「substring()」 を 使っ て 未 尾 か らら 文字 分 を 抜き 出し ます 。 


Var myClock = 【{ 
time : function ( ) { 
var dateOb] = new Date() : 
Ya エ = "0"+dateOb] . getHours( ) : 
= "0"+qdateOb] . getMinutes( ) : 
= "0" + qateOb] . getSeconds ( ) : 


.Subst 上 ring(h.1ength-2, h.1ength) : 
-Substringd(m.1ength-2, m.1ength) : 
= sg.Substring(s.1ength-2, s.1ength) : 
document . getE1emenByTdq ( " CurrentT1ime" ) . 1nnerHTMT, = 
h+ "時 "+m+ "分 "+s+" 秒 ": 
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則 | ICHAprERloy| li2Z 


リア ル タ イ ム に 時 刻 を デジ タル 
時 計 風 の 画像 で 表示 する 











ここ で は 、 デ ジタル 時 計 の よう な 画 像 を 使っ 
て リア ル タ イ ム に 時 刻 を 表示 する 方 法 に つい 
て 解説 し ます 。 












>| xyeseara 


sss 


つつ [用 Cyosvesorpc 


守 補 |wvasorpt sampe 











現在 の 時 刻 は 


ペー ジ が 表示 され る と 、 
現在 の 時 刻 が リア ル タ イ 
ム に 画像 で 表示 され る 
















二 コン ピュ ー タ | 保護 モー ド : 無効 


Seemee 当 目 用 用 馬 誠 珍 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta h 上 上 D-@Gqdu1i マ = "で ConEen ヒ - 上 ype" conten キ ="Eex 上 /htm] : 
CharSeG ヒ =uF-8"> 
<t ュ it 上 1e>JavaSocrip 上 Samp1e</ ヒ 1 上 1]e> 
<1ink re]="stylesheet" type="Eex モ /css" hreF="main.css" 
med1ia="a11"> 
く SCr1p yDpe="Eex /aVaSC エ 1p 上 " 5 エ o="main.S"></ SC エ ip キ > 
</head> 
<body> 
<h1 > 現在 の 時 刻 は </h1> 
<d1iV 1d="1Time"> 一 福 
< く 1mg Sro="1mages/0.9ifF" width="20" height="30" 
><1m Sro="1mages/1 .g1F" width="20" height="30" 
><1mgd Sro="1mages/co1on .9g1fF" width="10" height="30" 
><1md Sro="1mages/2 .g1F" w1qdth="20" height="30" 
><1md Sro="1mages/3 .d1iF" wiqdth="20" height="30" 
><1mO Sro="1mages/co1on .d1F" wiqdth="10" height="30" 
><1md Src="1mages/4 .g1F" width="20" height="30" 
>< く 1md Sro="1magdes/5.g1F" wiqdth="20" heigh="30"> 
</d1 マ > 
</body> 
</htm1] > 


馴 画像 を 表示 する 領域 を <div> タ グ で 指定 し て ID 名 を 付け て お く 





9 当 肖 用 EVER 半生 mainjs 


window.on1oad = Funotion ( ) { 
myC1ock .timeTmage( ) : 一 名 
Se 革 Tnterya1 ( "myC1oock . モ imeTmage( ) " , 1000) : 一 話 
} 
Var myC1ock = { 
timeTmage : Function( ) 
Yar dateOb] = new Date() : 
Ya h = "0"+qateOb] . getHours ( ) : 
Var mm "0"+dateOb] . getMinutes ( ) : 
Yar 8 = "0"+qateOb] . getSeconds ( ) : 
h = h.substring(h.1ength-2, h.1ength) : 
m 
8 


m = m.substring(m.1ength-2, m.1ength) : 

8 = 8.Substring(s.1ength-2, s.1ength) : 

Var 1mageTad = % い 、 
document . getE1ementBy エ Td ("1T1ime" ) .getE1ementsByTagName ("1mg"): 


imageTag [0] .src = "1mages/ "+h .charA モ (0)+".d1fF": 
imageTag [1] .src = "images/"+h . Char ム A キ (1)+".difF": 
imageTag [3] .Src = "images/"+m.cCharAE(0)+".g1E": 
imageTag [4] .src = "images/ "+m.CharA モ 上 (1)+".g1fF": 
imageTagd [6] .src = "1mages/"+s.charAt(0)+".giE": 
imageTag [7] .Src = "1mages/"+s .charAt(1)+".g1F": 
} 
} 

豆 現在 の 時 間 を 表示 する (この 処理 が な いと 1 秒 ほど 時 刻 が 表示 され な い ) 

話 | 秒 ご と に 時 間 を 表示 する 「myClock.timelmage()」 を 呼び 出す 

医 「Date」 オ ブ ジ ェクト を 生成 し て 時 間 を 求め 、 値 が 1 桁 の 場合 は ら 桁 に し て 文字 列 に 変換 する 

放 表示 領域 に ある <img> タ グ を 「getElementsByTagName()」 で 求め る 

回 求め た <img> タ グ に 表示 する 時 刻 の 画像 URL を 指定 する 


@jjf】g9】 晶 箇 画 像 で 時 刻 を 表す に は <img> タ グ の 「src」 ブ プロ バテ ィ に 時 刻 を 示す 値 に 対応 し た 画像 を 設定 する 


リア ル タ イ ム に 時 刻 を 画像 で 表示 する に は 、「setlInterval()」 を 使っ て 時 刻 を 表示 する 処理 を 呼び 出し 
ます 。 呼び 出さ れ た 関数 側 で は 、「Date」 オ ブ ジ ェクト を 生成 し て 時 刻 を 求め ます 。 この 時 刻 の 数 値 に 対応 
し た 0.gif-9.gif の 画像 を 用 意 し て お きま す 。 時 刻 の 値 に 応じ て 画像 の URL を 「src」 プ ロ パ ティ に 設定 し 
ます 。 





画像 を 操作 する 場合 、 通 常 は 「id」 属 性 また は 「name」 属 性 で 名 前 を 指定 し ます が 、 サ ンプ ル の よう に 表 
示 領 域内 に ある <img> タ グ を 求め る よう に する と 、「id」 属 性 や 「name」 属 性 で 名 前 を 指定 する 必要 が な く 
な り ま す 。 これ に より ID や 名 前 を 管理 する 必要 が な く な り 、 ト ラブ ル も 防ぐ こと が で きま す 。 
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リア ル タ イ ム に 時 刻 を 
アナ ログ 時 計 で 表示 する 
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ここ で は 、 画 像 を 使っ て 、 ア ナ ロ グ 時 計 で リ 
アル タイ ム に 時 刻 を 表示 する 方 法 に つい て 解 
説 し ます 。 

※ こ の サン プル は Firefox1 .5 以 降 、0perag 以 降 、 

Safari2 以 降 で な いと 動作 し ませ ん 。 








ファ イル B) 編集 (E) 表示 (V) 思 歴 (⑤) ブッ クマ ー ク (B) ツー ル ( エ ) ヘルプ (⑪) 
人 ・ 容 ・ g IX ] 全 日 fle:///C:/JavaScr 上 IG 國 cooge @ 
軸 Firefox を 使っ て みよ う 3 最新 ニュ ー ス 

アナ ログ 時 証 


グ 
























現在 の 時 刻 が リア ル タ イ ム に 
アナ ログ 時 計 で 表示 され る 





SeXg 事 eg 当 目 用 目 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 
<meta ht 上 tpD-equ1V= "Conten ヒ - 上 ype" Conten ヒ = "上 ex 上 /htm] : 
Charset=utF-8"> 
< 上 ュ it 上 1e>JavaSo エ ip 上 Samp1e</ ヒ 1 上 1e> 
<1ink re]="sty1esheet" type="text/css" hrefF="main.oss" 
media="a11 "> 
く 8SC エ 1D 上 ype= "上 Gx 七 / aaSC エ 1D 七 " 8 エ C="ma1in . 8 "></ SC エ 1p キ > 
</head> 
<body> 
<h1> ア ナ ロ グ 時 計 </h1> 
<canVas 1d="c1ook" w1dth="128" height="128"></canyas> 一 下 
</ body> 
</htm1> 











台 アナ ログ 時 計 を 表示 する <canvas> タ グ を 用 意 し て ID 名 を 指定 する 


ReWXe 事 eg 当 上 用 上 main.js 


window.on1oad = fFunotion( ) { 
CanVaSOb] = RGaEY33 お ンー 
conOb] = canvasOb] . getConext ( "2d" ) : 

















setTnterva1 ( "1mageC1ock .timeTmage( ) " , 1000) : 一 許 
} 
Var 1mageC1ock = 【{ 
imeTmage : Funotion ( ) { の 


く 9 Yar dateOb] = new Date() : 

Yar 廿 dateOb] . getHours() 12: 
Yar M dateOb] . getMinutes ( ) : 
Yar S = qateOb] . getSeconds ( ) : 
conOb] . drawTmage ( imgBaseOb] , 0 , 0) : 一 回 
this .draw (H*30, 1mgHOD] ) : 
this .draw(M*6, 1mgMOD] ) : pa 
this .draw (S*6, 1mgSOb] ) : 
conOb] . drawTmage ( imgCenterOb] , 56 , 56) : 一 回 

す / 

draw : Function(n, mg) { 
conOb] . Save ( ) : 
conOb] .trans1ate(64,64): 
conOb] . rotate((180+n) * Math.PT / 180): 
conOb] . drawTmage (1mg, 0, 0): 
ConOb] . resor@( ) : 

} 


} 
imgBaseOb] = new Tmage(128,128) 


mgBaseOb] . src = "1mages/c1oock .pnd": 
mgCenterOb] = new Tmage(16,17): 
1mgCenEerOb] . src = "1mages/pin .pnd": 
1mgHOb] = new Tmage(3,64): 
imgHOb] . src = "images/h.pnd": 
imgMOb] = new Tmage(3, 64): 
imgMOb] . src = "images/m.pnd": 
imgSOb] = new Tmage(3,64): 
imgSOb] . src = "1mages/s.pnd": 


副 <canvas> タ グ で 描画 領域 扱え る よう に する 
話 | 秒 ご と に 時 間 を 表示 する 「imageClock.timelmage()」 を 呼び 出す 葉 還 アナ ログ 時 計 の ベー ス 画 像 を 描画 する 
時 分 秒 の 針 を 描画 する 防 軒 時計 の 中 央 に 画像 を 表示 する 罰 還 人 針 の 画像 を 回 転 さ せ て 描画 する 


(@ 可 9】 映 上 アナ ログ 時 計 は 画像 を 重ね て 時 計 を 表現 する 


Firefox 1.5 以 降 、Safari2 以 降 、Opera9 以 降 で は <canvas> タ グ に より 自由 に グラ フィ ッ ク の 描画 を 行 
うこ と が で きま す 。 <canvas> タ グ に は 「width] 属 性 と 「height」 属 性 を 指定 し て 描画 サイ ズ を 指定 し ます 。 
描画 サイ ズ を 指定 し な いと 、 ブ ラウ ザ に よっ て は 描画 結果 が 異な る こと が あり ます 。 用 意 し た キャ ン バ ス に 
描画 を 行う に は 、「getContext('2d"')」 と し て 平面 に 描画 する た め の オ ブ ジ ェクト を 取得 し ます 。 この オブ 
ジェ クト に 対し て 「drawlmage()」 で 指定 し た URL の 画像 を 描画 し ます 。 アナ ログ 時 計 の 場合 、 時 計 の 背 
面板 、 針 な どの 画像 を PNG 形式 で 個別 に 用 意 し 、「drawlmage ()」 で 順番 に 描画 し て いき ます 。 

















針 の 表示 位置 (原点 ) は 、「translate()」 で 指定 し ます 。 針 の 回 転 を 表現 する に は 、「rotate()」 を 使い ま 
す 。 こ の 「rotate()」 の パラ メー タ は 回 転 角度 で 、 ラ ジア ン で 指定 し ます 。 「rotate()」 を 指定 する と 、 そ れ 
以後 に 描画 され る 図形 や 画像 は 、 す べ て て 指定 し た 角度 だ け 回 転 し た 状態 で 描画 べ れ ます 。 

移動 や 回 転 を 行う と 描画 角度 や 原点 が ずれ て し まう た め 、「save()」 を 使っ て 描画 前 の 描画 面 に 関す る 
情報 を 保存 し ます 。 保存 し た 情報 を 元 に 戻す に は 、「restore ()」 を 使い ます 。 
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[Date」 オ ブ ジ ェクト の 扱い 


JavaScript で は 、 日 付 を 扱う 「Date」 オ ブ ジ ェクト が 用 意 さ れ て いま す 。 この 「Date」 オ ブ ジ ェクト 
は 、 指 定 され た 日 付 の 情報 を 生成 し ます 。 この 「Date」 オ ブ ジ ェクト で す が 、 内 部 で は 1970 年 1 月 1 日 
午前 0 時 か ら 指 定 し た 時 間 ま で の ミリ 秒 と な っ て いま す 。 こ の た め 、「Date」 オ ブ ジ ェクト 同士 で あれ ば 、 
次 の サン プル の よう に 加算 や 減算 を 行う こと が で きま す 。 

また 、「setMonth()」 や 「setDate().」 な ど で は 、「setDate (60)」 の よう に 日 に ちの 範囲 を 超え て 
指定 し た 場合 で も ミリ 秒 で 計算 され る た め 、 正 し く 日 付 処 理 が 行わ れ ま す 。 

「new Date()」 と し て 日 付 オ ブ ジ ェクト を 生成 する 際 に パラ メー タ を 指定 する こと が で きま す が 、 こ 
の パラ メー タ は 日 付 文字 列 だ け で な く 、1970 年 1 月 1 日 か ら の 経過 ミリ 秒 も 指定 する こと が で きま 
す 。 これ に より ミリ 秒 を 基準 と し て n 日 後 や n ヶ 月 後 な どの 日 付 を 手軽 に 求め る こと が で きま す 。 


window .on1oad = funotion ( ) 【 
tm1 = new Date() 
a1ert ( "少し 待っ て か ら OK ボ タン を クリ ッ ク " ) : 
tm2 = new Date() 
a1er (tm2-tm1+ " 三 リ 秒 後に クリ ッ ク さ れ ま し た " ) : 












アラ ー ト が 表示 され て か 
ら ボ タン を クリ ッ ク す る 
まで の 時 間 が 表示 され る 


中 15723 ミ リ 秒 後に クウ リック され まし た 


ay 
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1 29 タブ 区 切り 形式 の デー タ を 
読み 込ん で 表示 する 





ーーーー イ ーーーーーーーーーー ーー 


ここ で は 、 タ ブ 区 切り 形式 の デー タ を 読み 込ん で 、 表 形式 で 表示 する 方 法 に つい て 解説 し ます 。 





| uve sara > 上 


本 2 





一 っ Ra は ー テ の =。 











- 息 格 。 陸 釈 。 
ビ ジネス [向け ノー - ト PC |s7.s00 円 ビジ ネス ユー ス に 最適 ペー ジ が 表示 され る と 、 
| プライベー ト 向 (けけ ノー ト pC |129.800 円 | ブ プライベート で も スト レス な く 使え ます タブ 区 切り の デー タ が 
両 性 能 デ スク トッ プ PC |199.s00 円 ゲー ム 用 達 に 最適 テー ブル と し て 表示 さ 
は パー [sg.soo 円 | 低 価格 の サー バー れる 
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人 ⑳ イン ター ネッ ト | 保護 モー ド : 有効 


SeXe 事 eg 当 目 用 上 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 
<meta h 上 tp-equ1Y= "ConEen ヒ -type" Conten ヒ ="Eex 上 /htm] : 
CharSeG ヒ =utF-8"> 
< 上 1 上 1e>J け JavaSC エ 1p 七 Samp1e</ ヒ 1 上 ]e> 
<1ink re1="styleshee" type="tex/css" hrefF="main.css" 
media="a11 "> 
く 8SC エ 1D 上 上 YDe= "上 xx / Ja マ aSC エ 1D ヒ 上 " SoC="p エ ototype . ]S "></ SCrip セ > 一生 上 
く SC エ 1p 上 ype= "上 Gx / aaSC エ 1p ヒ " 8 エ C="ma1in .]S "></ SC エ 1Dp ヒ > 
</head> 
<body> 
<h1> お すす め パ ソコ ン の 価格 一 覧 </h1> 
<d1iV 1d="Eab]eData "> デー タ を 読み 込み 中 . . . .</Q1 マ > 
</body> 
</htm1 > 





剛 prototypejs ラ イブ ラリ を 読み 込む 


Re)UXe ヨ ee 当 目 用 本 WS 王 棚 main.js 


window.on1oad = Funotion( ) { 
Var mseo = (new Date( ) ) .getTime ( ) : 一 馴 
new AJax.Reques ( "data . モ x モ 上" , { 一族 
method: "get", 
や a エ ame ヒ ら て 8S : "CaChe="+mSec, 
onSucceSss : FunoC1on (httpOb] ) { 
Var ex = httpOb〕] . responseTex 一葉 
Var LEF = String . FromCharCode (10 ) : 一 記 
Yar TAB = String . FromCharCode ( 9 ) : 一 回 
Var tabTex 上 = ext .sp1iE (TLF) : 一 回 
Var 上 b1 = "<tab1e border='1!>": 
For (Var +=0: 1<tabText .1ength: ュ ++) { 
Var CTexE = tabTex [1] . Sp11E (TAB) : 一 話 
1 は コ 蘭 に さ hー ン 、 
For (Var ]=0: ]j<cText.1ength: ゴ ++) { 
tb1 += "< 上 d>"+oText[]]+"</ 上 >『" : 
} 
tb1 +="</ 上 エッ > リ ": 
} 
tb1 += "</tab1e>": 
$( "tab1eData" ) . innerHTMT, = Db1: 
} , 
onFai1ure : Function (httpOb] ) { 
$ ("tab1eData" ) . innerHTML, = "エラ ー で 読み 込め ませ ん で し た ": 
} 
}) 


に 


ロー カル キャ ッシュ させ な いた め に 現在 の ミリ 秒 と URL を 組み 合わ せる 
… 読 み 込む ファ イル (data.txt) を 指定 する 

… 非 同期 で 読み 込ま れ た タブ 区 切り テキ スト を 読み 込む 

… 改 行 コ ー ド を 設定 する 

… タ ブ コ ー ド を 設定 する 

… 改 行 コ ー ド で 分 割 する 

… デ ー タ の 数 だ け テ ー ブ ル と し て 生成 する 

・ タ ブ コ ー ド で 分 割 す る 








回 回 回 回 回 回 回 回 


(@ji 抽 ge】 映 箇 prototype.」」S ラ イブ ラリ を 利用 し て 非同期 で 読み 込ま せ タ ブ コ ー ド で 分 割 する 
タブ 区 切り 形式 の テキ スト デー タ を 読み 込ま せ 表 示す る に は 、prototype.js ラ イブ ラリ を 利用 する と 簡 


単 で す 。 「Ajax.RHequest()」 で 読み 込む タブ 区 切り テキ スト の URL を 指定 し ます 。 デー タ が 読み 込ま れ た 
ら 、 改 行 コ ー ド と タブ コー ド で 分 割 し ます 。 分 割 さ れ た 数 だ け 繰り 返し 、 テ ー ブ ル と し て 表示 し ます 。 





計上 11-3 ヨ IdVHO 










skeN 咽 用 | 


| 19 生み 込 ん で 表示 する 
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こ て で は 、CSV 形 式 の デー タ を 読み 込ん で 、 表 形式 で 表示 する 方 法 に つい て 解説 し ます 。 


@ 〇 . @ repy/152 168.1.22/11 ピア 還 な x | uve searn 


Se | @ wesorptsampe | | 代 ・ = ひこ ada 














コー ヒー 豆 の 価格 一 覧 
名 箇 格 注釈 | 
lsoo 円 話 の よう な 香り と コク が 特徴 | ペー ジ が 表示 され る 
庄 り リマ ンジ ャ ロ lsoo 円 痢 特 の 酸味 が 特徴 と 、CSV 形 式 の デー 
ピン デリ ン Iiooo 円 若 み と コク 芳 陣 な 香り が 特徴 | タ が テー ブル と し て 
| プルー マウ ン テ ン |1so 円 最高 級 の コー ヒー 豆 | 表示 され る 











作 イン ター ネッ ト | 保護 モー ド : 有効 





Resee 可 当 目 用 用 本 誠 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 
<meta h ヒ 上 p-equ1 マ = "で ConEen ヒ 上 type" conten ヒ ="E 上 ex 上 /htm] : 
CharSG ヒ =utF-8"> 
< 上 ュ 1 上 1e>JavaScrip 上 Samp1e</ ヒ 1 上 1e> 
<1ink re1]="sty1esheet" type="Eext/css" hrefF="main.css" 
med1ia="a11 "> 
く 8C エ 1D ヒ 上 上 De=" ヒ 上 / Ja マ aSC エ 1D 上 " Sro="prototype . ]S "></ SC エ 1p ヒ > 一重 
く 8C エ 1p 上 上 yDe= "ex / aaSC エ 1p ヒ "5 エ o="matn . 5S"></ SC エ 1p セ > 
</head> 
< くわ ody> 
<h1> コ ー ヒ ー 豆 の 価格 一 覧 </h1> 
<d1Y 1d="tab]1eData "> デー タ を 読み 込み 中 . . . .</d1 マ > 
</body> 
</htm1 > 





右 prototypejs ラ イブ ラリ を 読み 込む 





史生 目 用 用 本 ER 生 mainjs 


window .on1oad = Funotion( ) { 
Ya msec = (new Date( ) ) .getTime ( ) : 一 馴 
new Ajax.Reques ( "data.csv", {一 話 
method: "ge", 
parameterS: "CacChe= "+mSec , 
onSuoceSs : Function (httpOb] ) { 
Ya エ 上 ex 上 = htpOb] . responseTex : 一 臣 
Yar LF = Sring-.fFromCharCode (10 ) : 一 回 
Var tabTexE = ext .sp1it (TLF) : 一 回 


の @)9(@ 束 @@ 


Yar 上 b] = "<tab1e border='1'>": 
For (Var =0: <tabTexEt .1ength: ュ ユ ++){ 
Yar CTexE = tabText [1] .sp11 モ (",") : 一 茹 


トー た るー 
For (Var ]=0: ]<cText .1ength: ]++) { 
tb1 += "< 上 q>"+oCTex モ 上 []]+"</ 上 d>": 
} 
HH "キマ / セ デモ >" 5 
} 
tb1] += "</tab1e>": 
$( "tab1eData" ) . innerHTMT, = 上 1 : 
} , 
onFai 1ure : Funoion (httpOb] ) { 
("tab1eData" ) . innerHTMT, = "エラ ー で 読み 込め ませ ん で し た ": 
} 
8 


こつ 


ロー カル キャ ッシュ させ な いた め に 現在 の ミリ 秒 と URL を 組み 合わ せる 
… 読 み 込む ファ イル (data.csv) を 指定 する 

… 非 同期 で 読み 込ま れ た CSV 形 式 の テキ スト を 読み 込む 

… 改 行 コ ー ド を 設定 する 

… 改 行 コ ー ド で 分 割 する 

… デ ー タ の 数 だ け テ ー ブ ル と し て 生成 する 

…「.」( カ ンマ ) で 分 割 す る 





回 回 回 回 回 回 回 


⑲ 軸 9】 昌 上 租 DrototyDe.)S ラ イブ ラリ を 利用 し て 非同期 で 読み 込ま せ 「.」 で 分 割 する 


CSV 形 式 の テキ スト デー タ を 読み 込ま せ 表 示す る に は 、prototype.jS ラ イブ ラリ を 利用 する と 簡単 で 
す 。 「Ajax.Request()」 で 読み 込む CSV 形 式 の テキ スト の URL を 指定 し ます 。 デー タ が 読み 込ま れ た ら 、 
改行 コー ド と 「.」( カ ンマ ) で 分 割 し ます 。 分 割 さ れ た 数 だ け 繰り 返し 、 テ ー ブ ル と し て 表示 し ます 。 

サン プル で 扱っ て いる CSV デ ー タ は 、 各 デー タ に は 「.」( カ ンマ ) が 含ま れず 、 な お か つ 「"」( ダ ブル ク ォ ー 








テー ショ ン ) で 囲ま れ て いな い デ ー タ を 使用 し て いま す 。 Excel や デー タベース か ら 出 力 さ れる デー タ の 場 











合 、「"」 で 囲ま れ て いる の で 表示 する 際 に は 、「"」 の 削除 な どの 処理 が 必要 に な り ま す 。 











放 GN 邊 1 IdVHO 

















SE⑥iR⑨ 有 [し cmApremir js 


12 1 XML 形式 の デー タ を 
読み 込ん で 表示 する 





村上 中 上 11-3d1dVHO 


304 





こ で は 、XML 形 式 の デー タ を 読み 込ん で 、 表 形式 で 表示 する 方 法 に つい て 解説 し ます 。 






| 


IPC2ZECrz7re etc/1 に 573 3 Live Search の お ・ 


次 裕 |@Jwesoptsampe | ー| 久 ・ 思 ・ 介 ・ ペ ー ジ 0) マ * 









Windows Vista の 価格 一 覧 

Iome Basix |27090 円 冊 低 限 の パッ ケー ジ で す 
Iome Premmm 31290 円 家庭 用 で す 

|Busmess 39690 円 ビジ ネス 用 達 に 
|Ulimate S1240 円 ワル スペ ッ ク の Visa で す 





ペー ジ が 表示 され る と 、 
XML 形式 の デー タ が テー 
ブル と し て 表示 され る 






















































eeee 要 目 上 用 用 馬 因 了 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta htDp-equi マ = "Conen ヒ 上 ype" ConEen ヒ = " モ ex モ /hEtm] : 
Charse ヒ =utF-8"> 
< ヒュ 上 1e>JavaScr1p Samp1e</ 上 1 上 1e> 
<1ink re]="styleshee" type="ex 七 /css" hrefF="main.Css" 
media="a11 "> 
く 8C エ 1D ヒ 上 ype=" 七 @x 七 / ]a マ aSC エ 1D 上 " 5 エ o= "proEotype . Js "></ SCr1p セ > 一環 
く SC エ 1D 上 ype= "上 ex / る VaSC エ 1D" 8 エ o= "ma1n . 8S "></ SC エ 1D セ > 
</head> 
<body> 
<h1>Windows Vista の 価格 一 覧 </h1> 
<d1Y 1qd="tab1eData "> デー タ を 読み 込み 中 . . . .</d1 マ > 
</ body> 
</htm1> 


豆 prototypejs ラ イブ ラリ を 読み 込む 


ee ヨ mee 要 目 用 本 WE 本 衣 輝 main.jS 


window.on1oad = Funotion( ) { 
Ya mseo = (new Date( ) ) .getTime ( ) : 一 馴 
new AJjax .Reques ( "data .xm1", {一 話 
method: "get", 
parame ヒ erS : "Caoh@e= "+mSe で , 
onSuccess : Func 七 ion (htpOb] ) { の 


Ya xml1Daa = htpOb] . responseXMT, : 一 葉 
Yar winTag = xm1Data .getE1ementsByTagName ( "windows" ) : 一 話 
Ya Eb1 = "<tab1e border='1'>『: 
For (Var +=0: 1<winTag.1ength: ュ ++) {一 回 
お 記 下 。 キー "で も エ テ > リア 
Yar typ = winTag[i] .getE1ementsByTagName ( "type" ) [0] : 


Ya prioce = winTag [1] .getE1ementsByTagName ( "price" ) [0] : 


Yar note = winTag [i] .getE1ementsByTagName ( "note" ) [0] : 
tb] += "<qd> "+EyDp . FirstChi 1d .nodeVa1ue+ "</ 七 d>": 
tb] += "<d> "+p エ ioe . F ュ St 上 Chi 1d .nodeVa1ue+ "</ モ 上 d>": 
tb] += "<Eqd>"+note .FirstChi1qd .nodeVa1ue+ "</ 上 d>" : 
oo] 
} 
モ 上 b] += "</t 上 ab1e>" 
$ ("tab1eData" ) . innerHTMT, = 1 : 
}, 
onFai 1ure : Function (httpOb] ) { 
$ ("tab1eData" ) . innerHTMT, = "エラ ー で 読み 込め ませ ん で し た ": 
} 
}) : 


トー 


"ロー カル キャ ッシュ させ な いた め に 現在 の ミリ 秒 と URL を 組み 合わ せる 
… 読 み 込む ファ イル (data.xml) を 指定 する 

…XML デ ー タ (DOM) を 読み 込む 

…: く windows> タ グ 情 報 を 取得 する 

…< く windows> タ グ の 数 だ け 繰 り 返 す 

… く type> く price><note> タ グ の 一 番 最初 の タグ の 情報 を 取得 する 

… く type><price><note> タ グ の 一 番 最初 の 子 ノー ド の 値 を 取得 する 


q 守 9@ 可 当 目 用 用 駅 央 了 data.xml 


<?xm] version="1.0" encoding= "ut 上 F-8"?> 


豆 . 
回 
回 
回 
回 
回 





<118 ヒ > 
<w1ndows><Eype>Home Bas1o</ 上 ype><prioe>27090 円 </prioce> “ 
<note> 最 低 限 の パッ ケー ジ で す </noe></wimndow8> t デ 
<w1ndows><type>Home Premium</yDpe><pr1oe>31290 円 </price> “、 
<note> 家 庭 用 で す </note></winmdows> を す プ 


<w1ndowSs><E 上 ype>BuS1mneS8</ 上 YYDeG><D エ 1oCe>39690 円 </D エ 1ce> * 

<note> ビ ジネス 用 途 に </note></windows> + ご 

<w1ndowS>< 上 ypDe>U1 上 1mate</ 上 YDe><p エ 1oCe>51240 円 </p エ ice> まき 

<note> フ ルス ペッ ク の Vi st 上 a で す </noe></winmdowS> と プ 
て / よ まぁ も シン 


放 SN 上 11 3 ヨ 1d4YHO 


K10) 





放 9N 上 11 dldVHO 








(@ 損 当 】 遇 上 prototype.jS ラ イブ ラリ を 利用 し て DOM と し て XML デー タ を 処理 する 


XML デー タ を 読み 込ま せる に は 、prototype.js ラ イブ ラリ を 利用 する と 簡単 で す 。 「Ajax.RHequest()] 
で 読み 込む XML デー タ の URL を 指定 し ます 。 XML デー タ の 場合 、responseXML と し て 読み 込む と 
DOM と な る た め 、 各 タグ 、 ノ ー ド を 手軽 に 処理 する こと が で きま す 。 タグ は 「getElementsByTagName 
(0)」、 ノ ー ド 処理 は 「childeNodes」「firstChild」「lastChild]」 な ど DOM 関 連 の メソ ッ ド や プロ パテ ィ を 利用 
する こと が で きま す 。 

サン プル で は 305 ペ ー ジ の XML デー タ (data.xml) を 読み 込ま せ て いま す 。 プロ グラ ム で は タグ を 
「getElementsByTagName()」 で 取得 し 、 そ の 最初 の 子 ノ ー ド の 値 を 「nodeValue」 で 読み 出し て いま 
す 。 読み 出し た デー タ を テー ブル と し て ペー ジ 上 に 表示 し ます 。 

















(@[ 間 ii ブラ ウザ に よっ て DOM ツ リー は 異な っ て いる 


DOM(Document Object Model: ド キュ メン ト オ ブ ジェ クト モデ ル ) が 扱え る ブラ ウザ で あれ ば 、 互 換 
性 が あり そう で す が 、 実 際 に は ノー ド の 解釈 が ブラ ウザ ご と に 異な っ て いま す 。 一 番 多 い の が タグ と タグ の 
間 の 空白 や 改行 な どの ノー ド の 解釈 で す 。 

Internet Explorer で は 、 タ グ と タグ の 間 の 空白 ノー ド は 無視 され 、 存 在 し な いこ と に な り ま す 。 これ に 対 
し て 他 の ブラ ウザ で は 、 タ グ と タグ の 間 の ノー ド は テキ スト ノー ド と し て 存在 し て いま す 。 た と えば 、 次 の サ 
ンプ ブル を 実行 する と 、Internet Explorer で は 「1」「3」 の 順番 で 表示 され ます ( 1 は タグ 、3 は テキ スト ノー 

ド を 示す )。 他 の ブラ ウザ で は 「3」「1」 の 順番 で 表示 され ます 。 

また 、Safari の で は コメ ント ノー ド は 最初 か ら 存 在 し な いこ と に な り 処 理 す る こと は で きま せん 。 この よう 
な ノー ド の 解釈 や 処理 が ブラ ウザ に よっ て 異な る と いう 点 に は 注意 が 必要 で す 。 これ は Ajax を 使っ て XML 
デー タ を 処理 する 場合 に も いえ ます 。 

HTML フ ァイル 
<d ュ 1 1d="oConEtents "> 

<Span>Samp1e 上 ex 上 </ SDan> 

く /d1 マ > 


⑯⑮JavaScript フ ァイル 


w1ndow.on1oad = funotion( ) { 
divOb] = qdocumen .getE1ementByTq ("conEents" ) : 
a1er (QivOb] . FirstChi 1d .nodeTyDpe) : 
a1er (divOb] . chi1qdNodes [1] .nodeType) : 


Internet Explorer で は 、「1」 その 他 の ブラ ウザ で は 、「3」「1」 の 順番 
「3」 の 順番 で 表示 され る で 表示 され る (画面 は FireFfox) 








eke 咽 用 | 


JSON 形式 の デー タタ を 
読み 込ん で 表示 する 





ここ で は 、JSON 形 式 の ファ イル を 読み 込ん で 、 表 形式 で 表示 する 方 法 に つい て 解説 し ます 。 



























GO | repy/ezee220- RE pa 5 | 
守 * |@mwsgwtsempe | | 合名 ・ 更 ・ は ペ ー ジ の ウィ に 


空気 清浄 機 の 価格 一 覧 
加 と | 19. oO 円 加 機能 が 付 信 kc パー ソナ ル タ イ ブ | 











ペー ジ が 表示 され る と 、 
JSON 形式 の デー タ が 
テー ブル と し て 表示 さ 
れる 





| 許 用 空気 清浄 機 2.690 円 可 | 力 が パワ ー ア ッ プ 
隊 務 用 空気 清浄 機 ” |sgsoo 円 融 性 能 の 浄化 力 で す | 











人 ⑳ イン ター ネッ ト | 保護 モー ド : 有効 


自明 上 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm1] > 
<head> 
<meta h ヒ 上 5 わ -equ1 マ = "ConEen ヒ type" Conten ヒ =" モ ex 上 /htm1: = 
で harSe キ =utF-8"> 
< ュ 1 上 1]e>JaVaSCr1p ヒ Samp1e</ ヒ 1 上 1e> 
<1ink re1="sty1esheet" type="tex 上 /css" hrefF="main.CSs" 
media="a11 "> 
<8SC エ ip tyDpe= "ex 上 / ]aVaSC エ 1p 上 "5S エ Co= "DootyDe . ]S "></ SC エ 1p> 一 罰 
< く 8SC エ ip 上 上 ype= "xx / Ja マ aSC エ 1D 七 " 5S エ Co= "ma1n . 8"></ SC て 1 や キ 上 > 
</head> 
<body> 
<h1 > 空気 清浄 機 の 価格 一 覧 </h1> 
<d1V 1d="tab] eData "> デー タ を 読み 込み 中 . . . .</d1 マ > 
< く / body> 
</htm1]> 





の 9@ 事 @ 


瑞 prototype.js ラ イブ ラリ を 読み 込む 


才 GN 委  -4 ヨ 14dYHO 





計 SN 11 -3 コ IdyHO 中 邊 





eg ヨ sem 当 目 用 用 本 時 是 語 輝 main.jS 


window.on1oad = Funotion ( ) { 
Ya エ msec = (new Date( ) ) .getTime ( ) : 一 福 
new Ajax.Reques ("data .tx モ ", {一 鍵 
method: "ge モリ" ッ / 
parame ヒ eS : "CaChe="+mS@eC, 
onSucceSss : Function (httpOD] ) { 
Ya JsonData = eva1 (httpOb] . responseTex) 一下 
Ya b1]1 = "<tab1e border='1'>": 
For (Var 1=O: 1<]jsonData.1ength: ユ ++) {一 回 
も も わ ] += "< ヒエ ッ > リ ": 
tb1 += "<Ed>"+]sonData [1] .type+ "</ 上 Ed>" : 
tb1 += で かーaamwtstdi prHeerr フ ca | 
て tb] += "< 上 d>"+]sonDaa [1] .note+ "</ モ 上 d>": 
ドイル ーー 
} 
tb も 1 += "</tab1e>": 
$( "tab1eData" ) .1nnerHTMT, = 上 1] : 
}7 
onFai 1]ure : Funcion (httpOb] ) { 
$( "tab1eData" ) . innerHTMT, = "エラ ー で 読み 込め ませ ん で し た ": 
} 
りう 5 


+ー 


"ロー カル キャ ッシュ させ な いた め に 現在 の ミリ 秒 と URL を 組み 合わ せる 
… 読 み 込 お JSON ファ イル (data.txt) を 指定 する 
…JSON 形 式 の デー タ を 読み 込み 、「eval()」 を 使っ て 正規 化す る 
"JSON デー タ の 数 だ け 繰 り 返す 
…「type」「price」「note」 の 値 を 取得 する 


(@ 損 人 】 敵 租 通常 の テキ スト デー タ と し て 読み 込ま せ 「eval()」 を 使っ て 利用 可能 な 状態 に する 


JSON 形式 の デー タ を 読み 込ま せる に は 、prototype.jS ラ イブ ラリ を 利 
[Ajax.RHequest()」 で 読み 込む JSON デー タ の URL を 指定 し ます 。 JSON は Java 
その も の な の で すか が 、 単 純 に 読み 込ん だ だ け で は 単なる テキ スト と な っ て し まい 、 配 下 


用 する と 簡単 で す 。 
Script の デー タ 構 造 
/ 連 想 配列 (/\ ッ シュ ) 





と し て 利用 する こと が で きま せん 。 この た め 、「eval(O)」 を 使っ て 処理 する こと で 、 配 列 / 連 想 配列 (/\ ッ シュ ) 


と し て 使用 で きる 状態 に 変換 し ます 。 


変換 され た デー タ は 通常 の 配列 処理 で の 指定 だ け で な く 、「 オ ブ ジ ェクト . プ ロ パ ティ 名 ] と いっ た 形式 で 





の 指定 も 可能 で す 。 















SE TI 人 旨 CHAPTER-11 と 133 


] 信介 Adobe Spry を 使っ て XML 
デー タ を 読み 込ん で 表示 する 











ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、XML デ ー タ を 読み 込ん で 、 表 形式 で 表示 する 方 法 に つい 
て 解説 し ます 。 


















上 epsee+ zur ee ・| | x ueserdo 


4@ javescrpt sample | | 僅 ー 還 -・ ・ は ペー ジ @) て 




















果物 の 価格 一 覧 
| 名 前 | 価格 | 


ルン ゴ loo 円 | ペー ジ が 表示 され る と 
カン lis の 円 el 


XML 形式 の デー タ が 表 


メロ ン Ho 円 
思 呈 示さ れる 


チ ゴ hio 円 
レモ ン lg 円 | 
げ ク ラン ポ Poo 円 








イン ター ネッ ト | 保護 モー ド : 有効 





@ 当 目 用 用 略語 際 index.htm 


<!DOCTYPE htm1] PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm1> 
<head> 
<meta http-equi マ = "Conten ヒ -type" Conen ヒ =" モ ex モ /hEm] : 
CharSe ヒ =utF-8"> ( 
< ヒュ 1 上 1 > け JaVaSC エ 1p 上 Samp1e</ ヒ 1]e> 
<1ink re]="sty1esheet" type="tex モ 上 /css" hrefF="main.CSS" 
media="a11 "> 
<SC エ 1pt sro="xpath . Ss" type=" ヒ ex / avVaSC エ 1D ヒ "></ SC エ 1D ヒ > 
<SCript sro="SpryData . 8" ae 
<SC エ 1p type=" ヒ ex / AVaSC エ 1 や ヒ 上 " SC="main .]S"> く / SC エ 1p ヒ > 
</head> 
<body テ > 
<h1> 果 物 の 価格 一 覧 </h1> 
<div spry : regton= "myDatabase" > 一角 
<tab1e border="1" ce11spacing="0"> 
< ヒエ >< モ h> 名 前 < / ヒロ ><th> 価 格 </ ヒロ >< / 上 エエ > 
< 上 エ Spry : repea 上 = "myDatabase"> 一 放 の 


b@)9@ 事 @ 





9 目 1 3 ヨ 1dYHO 


寺 SN 眼 | 1dVHO 目 邊 








くう 9 回 一 <td> {myDatabase : : name } </ 上 d>< モ d> {myDatabasSe : :P エ ユ ご 6} 円 </ 上 > 
に すら と 
</ 上 ab1e> 
< く /d1 マ > 
</body> 
</htm1> 


副 Adobe Spry フ レー ム ワ ー ク を 読み 込む 

話 XML デー タ を 表示 する 領域 を 「spry:region] と し て 指定 する 

医 XML デー タ を 繰り 返し 処理 する 領域 を 「spry:repeat」 と し て 指定 する 
話 | で 囲ま れ た 部 分 が XML デー タ に 置換 され る 


Reiemwe 当 目 用 | RS 二 計 輝 main.jS 


myDatabase = new Spry .Data . XMLDataSe ( "data . xm1" , "/1is/Ffruits" ) : 一 台 














豆 読み 込む XML デー タフ ァイル と 処理 基準 と な る 「XPath] を 指定 する 





@ 人 ig】 軸 上 XML データ を 表示 する 部 分 は HTML 文 書 内 で {--} を 使っ て 指定 する 


Adobe Spry フ レー ム ワ ー ク で XML デー タ 処 理 を 行う に は 、xpath.jS と SpryData.jS フ ァイル を 読み 
込ま せま す 。 ペー ジ 上 に XML デー タ を 表示 する 領域 と 、 何 の デー タ を 表示 する か を 指定 し ます 。 表示 す 
る 領域 の 指定 は 、「spry:region] 属 性 を 使い 、 表 示 対 象 と な る デー タベース 名 を 指定 し ます 。 この デー タ 
ベー ス 名 は 、 ス クリ プ ト フ ァイル で 設定 し た 名 前 に な り ま す 。 

XML デー タ 表 示 領 域 を 設定 し た ら 、 繰 り 返 し 表示 する 領域 を 指定 し ます 。 繰り 返し 表示 する 場合 に は 
「spry:repeat」 属 性 を 使い 、 デ ー タ ベー ス 名 を 指定 し ます 。 実際 に XML デー タ を 表示 する 部 分 は 1 一 | で 
囲み 、「 | デー タベース 名 : タ グ 名 | 」 の よう に 指定 し ます 。 

HTML 文 書 で の 表示 設定 だ け で は 、XML デ ー タ は 表示 され ませ ん 。 スク リプ ト で 使用 する デー タベース 
名 、XML デ ー タ ファ イル 名 、 デ ー タ の 基準 位置 を 指定 する 「XPath」 を 指定 し ます 。 これ は 
「Spry.Data.XMLDataSet()」 を 使っ て 指定 し ます 。 最初 の パラ メー タ が XML デー タフ ァイル 名 、 ら 番目 
が XPath と な り ま す 。 














(WWiil Adobe Spry で XML デー タ で な く プ ログ ラム 内 に デー タ を 持つ 場合 
Adobe Spry は XML ファ イル だ け で な く プ ログ ラム 内 で 配列 / 連 想 配列 (ハッ シュ ) と し て 定義 され た 
デー タ も 扱う こと が で きま す 。 この 場合 、 次 の よう に デー タ を 設定 し 処理 を 行い ます 。 


var fruitsData = [ 
{ Erulttg: "リン シゴ" 。 Co1or: " 赤 回 * 。 pFiGe: 100 1, 


{ fruits: "メロ ン ", Co1or: "緑色 ", prioce: 400 }, 

1 征 uLESs ツイ ヨリ 。 (CoOEs の 外 や AGeji 210 すす 5 
myDatabase = new Spry .Daa . DataSe ( ) : 
myDatabase .data = FruiEsDaa : 

myDatabase .dataHash = FruisDaa: 
myDatabase . 1oadData( ) : 











SECTION 還 較 
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ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、 該 当 す る XML デー タ だ け を 表示 する 方 法 に つい て 解説 し 
ます 。 








@O- ロ m //192.168.1. っ 2 etc 紀 | xlluve = ネー 


補 | @]avasept sample ao | 食 ・ 回 ・ ゆこ は ペ ー ジ () > 












価格 一 覧 (赤い 果物 ) 

リン ゴ は 入 色 で 100 円 ペー ジ が 表示 され る と 、 
イチ ゴ は 赤色 で 210 円 赤色 に 該当 する デー タ 
サク ラン ポ は 志 色 で 200 幅 だ けが 表示 され る 











他 イン ター ネッ ト | 保護 モー ド : 有効 


DE | 目 軸 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta htp- equiy= "ConEenE-type" ConEen ヒ ="Eex 上 /htm1 : 
CharSe キ =utF-8"> 
< ヒュ 上 1e>JavaScr1p 上 Samp1e</ ヒ 1 上 1e> 
<1injk re1="styleshee" type= "も ex モ /css" hrefF="main.CSS" 
media="a11 "> 
<8C エ ip src="xpath .]s" ype= " 七 Gx 七 / Ja マ aSC エ 1D モ "></ SC エ ユ や ヒ > 
<8Cr1p sro="SpryDaa . 8S" yDe= "ヒヒ / ] る で aSC エ 1D 七 "></ SC エ 1D セ > 」 
< く 8C エ 1p 上 yDe= "ヒヒ / Ja マ aSC エ 1D " Sro= "ma1n .S"></ SC エ 1Dp ヒ > 
</head> 
<body> 
<h1 > 価格 一 覧 (赤い 果物 ) </h1> 
<d1V Spry : redion= "myDatabase"> 一 許 
<d1V Sp エ y : エ epea= "myDatabase"> 一 話 
<d1iv spry :Choose=" Spry : Choose"> 一 婁 の 


Ke)9IY@s 





放 N 邊 11 - ヨ 14YHO 
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の 


<span Spry :when="' {Co1or})' == ' 赤 色 '">{myDaEabase : :name ) は 
{myDatabase : : Co1or} で {myDatabase : : P エ 1 で ら } 円 </ Span> 
</d1 マ > 
く /d1 マ > 
< く /d1 ュ マッ > 
</body> 
</htm1> 

攻 Adobe Spry フ レー ム ワ ー ク を 読み 込む 

話 XML デー タ を 表示 する 領域 を 「spry:region] と し て 指定 する 

医 XML デー タ を 繰り 返し 処理 する 領域 を 「spry:repeat] と し て 指定 する 

放 持 定 の デー タ を 抽出 する 領域 で ある こと を 指定 する 

回 「spryi:when」 を 使っ て 条件 式 を 指定 する 


SeWemee 当 目 用 本 本 SS 本 main.js 


myDatabase = new Spry .Data . XMLDataSet ( "data .xm1", "/1is 上 /Fruits" ) : 一 福 
台 読み 込む XML デー タフ ァイル と 処理 基準 と な る 「XPath」 を 指定 する 


(@⑯ 損 M】 還 上 Spry:when を 使っ て 条件 を 指定 する 


Adobe Spry フ レー ム ワ ー ク で は 、XML デ ー タ 内 か ら 特 定 の 文字 や 値 に 一 致す る デー タ だ け を 表示 する 
こと が で きま す 。 特 定 の 値 に 一 致す る デー タ だ け を 抽出 する に は 、「<div spry:choose="spry:Choose">」 
と し て 抽出 する 領域 を 指定 し て お きま す 。 その 中 で 「spry:when] を 使っ て 条件 式 を 指定 し ます 。 


サン プル で は 、「<span spry:when=" lcolorl' == ' 赤 色 ">」 と し て <color> タ グ の 内 容 が 赤色 の 文字 
列 の 場合 の み 表 示す る よう に し て いま す 。 タグ の 内 容 で は な く 属 性 値 を 指定 する こと も で きま す 。 属性 値 
を 指定 する 場合 は 、「 タ グ 名 /@ 属 性 値 ] こ とし て 「/@」 で 区 切っ て 指定 し ます 。 また 、Adobe Spry に は 「ifl な 
どの 条件 判断 も 用 意 さ れ て いる の で 、 状 況 に 応じ て 使い 分 ける と よい で し ょ う 。 








[ill 明 Adobe Spry に は エフ ェクト 機能 も 装備 され て いる 


Adobe Spry は XML デー タ や JSON 形式 な どの デー タ 処 理 を 得意 と し ます が 、 デ ー タ 処理 ば か り で は 
な く 、 次 の エフ ェクト 機能 も 用 意 さ れ て いま す 。 
* フェ ー ド 処理 を 行う 
* ブラ イン ド 処 理 を 行う 
* ハイ ライ ト 処 理 を 行う 
e 拡大 縮小 処理 を 行う 
e 左右 に 振動 させ る (シェ イク ) 
* スラ イド 処理 を 行う 
e 潰し 処理 を 行う 
Adobe Spry の エフ ェクト サン プル を 次 の URL に 用 意 し て あり ます の で 、 参 考 に し て みて くだ さい 。 














http://Www.openspc ら .org/reibun/Adobe_Spry/index.html 








CHAPTER-11 ゅ | 3s 








































ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、、XML デ ー タ を 並べ 替え て 表示 する 方 法 に つい て 解説 し 
ます 。 
js 
※ ボ タン を クリ ッ ク す る と 、 価 格 の 安い 順に 並べ 替え る こと が で きま す 。 〇 の 
= 
p 
で 
本 
や 
本 本 
で 
※ ポ タン を クリック する と 、 価 格 の 安い 則 こ 並べ 替え る こと が で きま す 。 の 
他 
@ イン ター ネッ ト | 名 
| し モン は 綱 色 で w 円 










| リン ゴ は 赤色 で 100 
間 ミカ ン は 福 色 で 150 円 
上 | サク ラン ポ は 赤色 で 20 円 
| イチ ゴ は 赤色 で 210 円 
時 ロン は 緑色 で 400 円 


[ソー ト ] ボ タン を クリ ッ ク す る と … 








価格 の 安い 順番 に デー タ 
が 表示 され る 
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<!DOCTYPE htm1 PUBLITC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm1 > 
<head> 

<meta h 上 上 わ -equ1i マ = "ConEen ヒ - 上 ype" Conen ヒ =" ヒ ex 七 /htm1 : 
CharS@G ヒ =u ヒ FE-8"> 
< 上 ュ 1 上 1e>Javya8cript Samp1e< / 上 1 上 1@e> 
<1ink re]="styleshee" ype=" て tex 上 /css" hrefF="main.CSS" 
media="a11 "> パ 
<SCr1pt sro="xpath .]s" type=" ヒ ex ヒ / aaSC エ iD "></ SC エ 1D ヒ > 
<SC エ ip sro="SpryData . 8" co 
<8SC エ 1p ヒ type= "exxt / JaVaSC エ 1DE" SrC="matn .]S"></ SC エ 1D セ > の 


EE 


計上 11 331dYHO 











</heaqd> 
<body テ > 
<h1 > 果物 の 価格 一 覧 </h1> 
※ ボ タン を クリ ッ ク す る と 、 価 格 の 安い 順に 並べ 替え る こと が で きま す 。 
<fForm action=" . /Sor .Cd1i" method= "ge 上 " name="matnForm"> 
<1npu 上 上 ype= "buton" 1d="Sor ヒ BuEon" Ya1ue=" ソ ー ト "> 
</ Form> 
<d1iV Spry : redion= "myDatabase" > 一角 
<d1iV spry : repea ヒ = "myDatabase"> 一 話 
<span> {myDatabase : : name} は {myDatabase : : Co1or} で 回 
{myDatabase : :p エ 1cCe} </ span> 円 
< く /d1 マ > 
< く /d ュ マ > 
</body> 
</htm1 > 


豆 Adobe Spry フ レー ム ワ ー ク を 読み 込む 

話 XML デー タ を 表示 する 領域 を 「spry:region] と し て 指定 する 

話 | XML デー タ を 繰り 返し 処理 する 領域 を 「spry:repeat」 と し て 指定 する 
話 表示 する XML デー タ の タグ 名 を 指定 する 


SeWXe 雪 ee 当 目 用 馬琴 本 輝 main.js 


myDatabase = new Spry .Data . XMLDataSet ( "data.xm1", "/11s 上 /fFruitg" ) : 一 台 
myDatabase . setCo1umnType ("price", "number" ) : 一 許 
w1ndow.on1oad = Funotion( ) { 

documert .getE1emenEtByTd ( "SortButon" ) .onc1iok = Funoction( ) { 


myDatabase . Sor ( "prioce" ) 一 話 
} 
} 


頭 読み 込む XML デー タフ ァイル と 処理 基準 と な る XPath を 指定 する 
話 ソー ト 対 象 と する デー タ の 型 を 指定 する (ここ で は 価格 順に ソー ト す る の で 「number」 (数値 ) を 指定 する ) 
医 デー タ を ソー ト し て 表示 する 


@ 仙 9】 明 租 SetColumnType()」 で 対象 デー タ の 型 を 指定 後に 「sort()」 を 使っ て ソー ト 処 理 を 行う 
Adobe Spry フ レー ム ワ ー ク で は 、XML デ ー タ を 文字 列 ・ 数 値 販 に ソー ト す る こと が で きま す 。 ソー ト 対 
象 が 数 値 の 場合 に は 、「setColumnType()」 を 使っ て 対象 と な る タグ の 型 を 指定 し ます 。 サン プル で は 


<price> タ グ を 「number] (数 値 型 ) と し て 設定 し て いま す 。 
ソー ト 対 象 の デー タ 型 を 設定 し た ら 、「sort())」 メ ソ ッ ド を 使っ て ソー ト 処 理 を 実行 し ます 。 この メソ ッ ド の 


パラ メー タ に ソー トド 対象 と な る XML タグ 名 を 指定 し ます 。 複数 の タグ 名 で ソー ト す る 場合 に は 配列 て と し て 
指定 し ます 。 2 番目 の パラ メー タ は ソー ト 順 を 切り 替え る か どう か を 指定 し ます 。 「sort」 メ ソ ッ ド を 呼び 
出す た びに 昇順 と 降順 を 切り 替え る に は 、「"toggle'」 の 文字 列 を 指定 し ます 。 











sECTIoN | 議 


応 『 和 HTML テ ンプ レー ト を 利用 する 











ここ で は 、prototype.jS ver 1.5 を 使っ た HTML テ ンプ レー ト に つい て 解説 し ます 。 








【 南 関東 】 HTML テ ンプ レー ト を 使っ て 
今日 の 天気 は くも り で す 。 最高 気温 は 13C で す 。 8 デー タ が 表示 され る 
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11 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta h 上 上 p-@qdu1 マ = "Conen ヒ 上 ype" Conten ヒ =" モ ex 上 /htm] : 
Charset=utF-8"> 
< 上 ュ 1 上 1e>JayaSoript Samp1e</ ヒ 1 上 1e> 
<1injk re]="stylesheet" type="tex 上 /css" hrefF="main.CS ら 8" 
media="a11 "> 
く 8C エ 1p 上 上 yDe=" 七 x ヒ 上 / Ja で aSC エ 1p 七 " 5 エ C= "prototype . 8S "></ SCript> 一 名 
<8SC エ 1p 上 上 yDe= "上 xx 上 / ] る VaSC エ 1D 上 "SC= "ma1n . 8 "></ SC エ 1D ヒ > 
</head> 
<body> 
<h1 > 天気 情報 </h1> 
<d1iV 1d="mesSsade "></Q1 マ > 
</body> 
</htm1] > 





副 prototypeJjs ラ イブ ラリ を 読み 込む 





計 9N 1 -d1dYHO 


SeXeee 当 目 用 上 | 本 志和 mainjs 


window.on1oad = Funotion ( ) { 
Ya msec = (new Date( ) ) .getTime( ) : 
new Ajax .Request ( "message . モ Ex 上 ", {一 視 
method: "qe ヒ ", 
pa エ ame ヒ GrS: "CacChe="+mSec, 
onSuocess : Funo 上 ion (httpOD] ) { 
Ya エ ヒ @x 七 = htpOb] . FesponSseTex : 
yar emp1ate = new Temp1ate (ex) : 一 鮭 
("message" ) .innerHTMT, = template .eva1uate( { 
weather : "くも り ", a 
temp : "13 や " 
} ) : 
onFai1ure : Function (httpOE〕] ) { 
$( "tab1eData" ) . innerHTMTL, = "エラ ー で 読み 込め ませ ん で し た " : 
比 
9 


トー 


台 テン プレ ー ト と な る テキ スト ファ イル を 読み 込む 
族 HTML テ ンプ レー ト と し て 生成 する 
医 テン プレ ー ト の 内 容 を 指定 され た デー タ に 置換 する 


計 SN 上 1 -3 ヨ IdYHO 目 邊 


Reie 紹 se 当 目 用 用 本 諾 多 4 ン ZZ 力 有 ゆ message.txt 


【 天 気 情報 】<br> 
今日 の 天気 は # (weather } で す 。 最高 気温 は #{temp} で す 。 





(@jj 抽 人 】 映 租 テン プレ ー ト を 生成 し て 「evaluate()」 で 置換 する 


prototype.Js ラ イブ ラリ の バー ジョ ン 1.5 以 降 に は 、HTML テ ンプ レー ト 機 能 が あり ます 。 この 機能 を 利 
用 する と 、HTML 文 書 内 また は テキ スト ファ イル 内 の 特定 の 部 分 だ け を プロ グラ ム で 置換 する こと が で き 
ます 。 置換 対象 と な る の は 「#| 名 前 | 」 の 文字 列 で す が 、 こ れ は 任意 の パタ ー ン を 指定 する こと も で きま す 。 





HTML テ ンプ レー ト 機 能 を 利用 する に は 、 テ ンプ レー ト と な る デー タ ・ フ ァイル を 「new Template()」 と 
し て 新た に 生成 し ます 。 生成 し た テン プレ ー ト オブ ジェ クト の 「evaluate()」 で パラ メー タ に 置換 する キー 
と 値 を プロ パテ ィ リ スト 形式 (連想 配列 (/\ ッ シュ) 形式 ) で 指定 し ます 。 




















SE の ⑦ 対 ll CHAPTER-11 と 13Z 


民放 絢 フ ァイル に デー タ を 渡す 





ここ で は 、 別 ペー ジ ( 別 の HTML フ ァイル ) に デー タ を 渡す 方 法 に つい て 解説 し ます 。 






別 ペ ー ジ に 入力 され た 
文字 列 が 表示 され る 









@ 〇 - | eeyOozie: keee a 
税 補 |@avasomptsampe | ー ド 色 -<<= 回 = ぬ 。 











文字 情報 の 送信 














送信 文字 : こん に ち は 


別 ペー ジ に 送信 
N 

















送信 する 文字 を 入力 し て 
ボタ ン を クリ ッ ク す る と … 


1 431dVHO 目 四 








同 征 目 上 用 台大 際 index.htm (送信 側 ) 


<!DOCTYPE htm] PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm1]> 
<head> 
<meta htp-equ1iy= "conEen ヒ -type" conEen ヒ ="EexE/htm1: 
CharSeG キ =utF-8"> * 
< モ ュ 上 1e>JavaSor1p 上 Samp1e</ ヒ 1 上 1e> 
<1ink re1="sty1esheet" type="Eext/css" hreF="main.CSsS8" *v 
media="a11 "> ト 
<SC エ 1p type= "ex /aVaSC エ 1 上 " 8 エ o="main . 8S "> く / SC エ 1D キ > 
</head> 
<bod ツ > 
<h1 > 文字 情報 の 送信 </h1> 
<fForm action=" ./setoss .Cdg1" method= "ge" name="mainForm"> 
送信 文字 :<1nput type="tex モ " name="sendTex モ " 1d="sendTex モ " *。 
Ya1ue= "こん に ち は "><D エ > +* ご 
<1npu type= "buEon" 1d="sendButEon" Ya1ue=" 別 ペー ジ に 送信 "> 
< く / Form> 
</body> 
</htm1> 





@)9@ 認 る @ 





Sea ヨ lse 要 目 用 用 上 男 誠 珍 next.html( 受 信 側 ) 


<!DOCTYPE htm] PUBLTC "-//W3C//DTD HTML, 4.01 Transit1ona1 / /EN"> 


<htm1] > の 


<head> 


計 SNW 





ED 
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<meta h ヒ 上 わ ー@Gqdu1 マ = "で COn ヒ en 上 ype" Conten ヒ = " モ ex ヒ /htm] : 
で Cha エ SG ヒ =u ヒ F-8 "> 
< ヒュ 上 ] ら >Ja で a8 ご C エ ュ p 七 Samp1e< / ヒ 上 1e> 
<11nk re]1="sty1eshee 上 " type="tex ヒ 上 /css" hrefF="main.Css" 
media="a11 "> 
くど エ ュ 1 わ 上 上 yDe= "上 @ メ 七 / ]a び aSC エ 1D ヒ " S エ で =" エ GOCG1Ve@ . ]S "></ SC エエ p ヒ > 
</head> 
< く Dbod ツ > 
<h1 > 文字 情報 の 受信 </h1> 
< で 1d="mesSaJe "></d ュ > 
</body> 
</htm1]> 


SeXeeeg 当 目 用 用 本 本 語 輝 main.jS 


window.on1oad = Funotion( ) { 
documen . getE1ementByTdq ( " sendButton" ) .onc1iok = Funotion( ) { 
Yar 上 ex 上 = qoocumen .getE1ementByTdqd ("sendTexE" ) .Ya1ue 一久 
1oocation .hrefF = "next .htm1] ?data="+encodeURTComponen (tex) : 一 許 


回 テキ スト フィ ー ル ド に 入力 され た 内 容 を 読み 出す 
話 nextihtml フ ァイル に クエ リ 文 字 列 と し て 連結 し URL と する 


ReWXeee の 当 目 上 用 用 receive.jS 


window.on1oad = fFunotion( ) { 
var data = 1ooation .href . sp11it("?") [11 : 一軸 


Var ex = qata.sp1it ("=" ) [1] : 一 鍵 
document . getE]1ementByTd ( "message" ) . 1nnerHTML, = 
decodeURTComponen (ex ) : 


回 受信 し た 内 容 は URL に 含ま れ て いる の で 「spIit("?)」 と し て 「?」 以 降 の デー タ を 取得 する 
用 デー タ は キー と 値 の パ ペ ア な の で 「split("'")」 と し て キー と 値 を 分 離し 値 だ け を 読み 出す 
医 | デ ー タ を デコ ー ド し ペー ジ 上 に 表示 する 


@7i】 語 上 クエ リ 文 字 列 と し て 受信 側 の ファ イル に 送信 する 
JavaScript で 他 の ペー ジ に デー タ を 受け 渡す に は 、 受 信 先 の ファ イル の UHL に クエ リ 文 字 列 と し て 付 
加 し 、 送 信 す る 方 法 が あり ます 。 受信 側 の ファ イル で は 、URL の 「?」 以 降 の クエ リ 文 字 列 を 取り 出し ます 。 取 
り 出 し た 文字 列 か ら キ ー と 値 の ペア を 取り 出し 、 必 要 な デー タ だ け を 抽出 し ます 。 





クエ リ 文 字 列 な の で 大 量 の デー タ を 送信 する こと は で きま せん が 、 い くつ か の 変数 値 な ど は 送信 する こ 
と が で きま す 。 また 、 日 本 語 や 記号 な ど が 含ま れる 場合 に は 、 必 ず エ ンコ ー ド し て か ら 送 信 し ます 。 
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%4 グラ フ を 表示 する 





ここ で は 、 数 値 デ ー タ を グラ フ 化 し て 表示 する 方 法 に つい て 解説 し ます 。 











て! | 9 htp://192.168.1.22/11_etc/11-010/samr | X uve seardh p ・| 





次 交 | 弧 Javascmpt sampe ー ジ (") * 符 ツ ー ル O) マ 








産業 別 の 前 年 度 対比 グラ フ 






ペー ジ が 表示 され る と 、 
グラ フ が 描画 され る 











ペー ジ が 表示 され W イン ター ネッ ト | 保護 モー ド : 若 効 系 10096 < 





SeWe ヨ ee 当 目 用 用 上 馬 誠 昌 index.htm 


<!DOCTYPE htm] PUBLTC "-//W3C//DTD HTMT, 4.01 Transit1ona1 / /EN"> 
<htm]> 
<head> 
<meta h 上 上 p-equ1i ゞ = "ConEen ヒ -type" conten ヒ ="Eex /htm1 : 
CharSe ヒ =utF-8"> 
< モ 上 1 上 1]e>JaVyaSCr1p Samp1e</ ヒ 1 上 1e> 
<1ink re1="sty1esheet" type="tex モ /css" hreF="main.CSss" 
med1ia="a11 "> 
<SCr1p ヒ ype=" ヒ ex / ]aVaSC エ 1D 七 " S エ C= "D エ OotyYDe . ]S "></ SC エ 1Dp キ > 
<Scr1ip type= "て ex 上 / avaSC エ 1D" S エ o= "exCanVaS .]S"></ SC エ 1D セ > 
<SC エ ip 上 ype=" ヒ x ト / ]aVaSC エ 1D 上 " Src="P1or .]S "></ SC エ 1D ヒ > 
<SC エ ip 上 type=" ヒ ex / JaVaSC エ 1p 上 "8 エ C="matn .S"></ SC エ 1D ヒ > 
</head> 
< く bod マ > 
<h1 > 産業 別 の 前 年 度 対比 グラ フ < /h1> 
話 一 <div マ ><canvaSs 1d="graph" heigh ヒ ="300" width="600 "></CanVaS></d1 マ > 
</body> 
</htm1> 


豆 必要 な ライ ブラ リ を 読み 込ま せる 
話 グラ フ を 描画 する キャ ン バ ス タグ を 用 意 する 
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ReiWXe9e り 当 目 肖 目 main.js 


window.on1oad = fFunotron( ) { 


Var Qdatase = { 
GIIOSWienyKROPS3l 生出 02 と 22 の DMRNISSZ he 5 


eiES2AGB2Se IO DISSI PE ER 2505dESy 導 d 
} 5 
var options = { 


backgroundCo1or: "#dbdbdb" , 


padding: {1eFt: 50, right: 0, top: 10, bottom: 9 


co1orScheme: "#550000", 
xTioks: [ 
{Y:0, 1abe1 : "農業 " } , 
{y:1, 1abe1 : " 重工業 " } , 
ts25 .HaBe す :" 下 業 "] / 
{Y:3, 1abe1 : "情報 " } 


時 が 

var bar = new P1otr . BarChar ( "graph" , options) : 一 話 
bar . addDataset (datase) : 一 回 

bar . render ( ) : 一 記 


+ー 





… グ ラフ 化す る 数 値 デ ー タ を 用 意 する 
グラ フ の 表示 オブ プション を 指定 する 
… グ ラフ に 表示 する ラベ ル を 指定 する 
… 棒 グラ フ を 生成 する 

… 棒 グラ フ に デー タ を 追加 する 

… 棒 グラ フ を 表示 する 














(@ 損 市 映 但 Plotr ラ イブ ラリ を 使っ て グラ フ を 描画 する 


JavaSoript で は 、<canvas> タ グ を サポ ー ト し て いる ブラ ウザ (Firefox1.5 以 降 、Safario、Opera8) 
の 場合 は 、 自 由 に グラ フィ ッ ク を 描画 する こと が で きま す 。 また 、Internet Explorer で も キャ ン バ ス の 処理 
を 動作 させ る た め の ラ イブ ラリ が 用 意 さ れ て いま す 。 これ ら を 組み 合わ せ て グラ フ を 描画 する の が Plotr 
ライ ブラ リ で す (Plotr ラ イブ ラリ を 利用 する に は prototype.js ラ イブ ラリ の ver 1.5 以 降 が 必要 )。 


グラ フ を 表示 する に は 、HTML 文 書 内 に <canvas> タ グ を 指定 し て お きま す 。 プ | 


ログ ラム 側 で は 表示 す 





る た め の グ ラフ 値 、 グ ラフ の 色 や ラベ ル な ど を 指定 し ます 。 棒グラフ を 表示 する 場合 は 、「Plotr.Bar 


Chart()」 を 使い ます 。 パラ メー タ に <canvas> タ グ の ID と 表示 オプ ショ ン を 指定 し 
表示 する デー タ を 設定 し 、「render()」 メ ソ ッ ド で 画面 に 描画 を 行い ます 。 


ます 。 


な お 、Plotr ラ イブ ラリ は 、 他 に も 折れ 線 グ ラフ や 円 グラ フ な ど を サポ ー ト し て いま す 。 Plotr ラ イブ ラリ は 、 


次 の ペー ジ か ら ダ ウン ロー ド す る こと が で きま す 。 


http://www.solutoire.com/plotr 
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選 衣 計 み 導 s す る 





ここ で は 、 ク ッ キ ー デ ー タ を 読み 込ん だ り 、 書 き 込ん だ りす る 方 法 に つい て 解説 し ます 。 





























[書き 込み ] ボ タン を クリ ッ ク す る と 書き 込ん だ 後に [読み 込み ] 
クッ キー の 書き 込み を 行う ボタ ン を クリ ッ ク す る と … 

















書き 込ん だ クッ キー の 
内 容 が 表示 され る 





別当 目 有用 馬 唐 珍 index.htm 





<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4 .01 Transitiona1 / /EN"> 


<htm] > 
<head> 
<me ヒ a h 上 上 りー-@Gqu1 マ = "ConEen ヒ -t 上 ype" ConEen ヒ = "ex 上 /htm1: 
Cha エ SG ヒ =u 上 FE-8"> で 
< ヒュ 1 七 ]e>JaVYaSCr1p 上 Samp1e</ ヒ 上 1e> 





の 


寺 9N 上 11 3 コ 1dYH つ 目 目 








寺 9 中 上 11- ヨ IdVHO 





<1ink re]="styl1eshee" type="tex 上 /css" hreF="main.CSS" 


media="a11 "> 
<8C エ 1p 上 上 ype= "xx 七 / る VaSC エ 1D ヒ "So= "ma1m . 8 "></ SC エ ュ エ D ヒ > 


</head> 


<body テ > 
<h1> ク ッ キ ー の デー タ の 読み 書き </h1> 
<Form acCion=" ./Cookie .Cg1" method= "ge ヒ 上 " name="matnForm"> 


<1npu 上 ype=" モ ex ヒ " 1d="userData" name= "userData" 
Va1ue= "215 "><D エ > 「 
<1nput type= "buton" 1d= "writeBu モ ton" Ya1ue=" 書き 込み "> 
< く 1npu 上 ype= "buton" 1d="readButon" で a]1ue=" 読 み 込み "> 

</ Form> 

<div 1d="resu1 七 "> 結果 :</d1 マ > 

</body> 
</htm1> 


SeIWNe 吉 eg 当 目 用 用 本 SR 二 交 mainjs 


window.on1oad = fFunotion( ) 【 
document . getE]ementByTd ( "writeButon" ) .onc1ick = Funoion ( ) { 


var data = qoocument .getE1emenEtByTd ( "userData" ) .Ya1u6: 
cookie .wr1ite ( "userCommen" , data, 30): 

} 

Qoocument . getE1ementByTdq ( "readBu て ton" ) .onc1iok = funot1ion( ) { 
var data = oookie . read ( "userCommen キ " ) : 
document . getE1ementByTdq ( "resu1 ヒ " ) . innerHTMT, 
"クッ キー デー タ は [Edlata 和 "7 


} 


Var cookie = { 
write : Funotion (theName_ ,EtheValue_ ,theDay_ ) {一 釧 
F ((theName_ _ != nu11) g& (theVa1ue_  != nu11) ) { 
Yar expDay__ = "Wed, 01 Jan 2020 18:56:35 GMT": 
3F (theDay__ != nu11) { 
theDay__ = eva1 (theDay__):) 


Ya エ SetDay = new Date() 
setDay . setTime (setDay . getTime ( )+ (theDay__ *1000*60*60*24) ) : 一 話 


expDay_ _ = setDay . EoGMTStrind( ) : 
} 
documen .cookie = 一 話 
theName_ _ + "="+esCape (theVa1ue_ )+":exDp1res="+exDpDay_ : 


エエ Gu て nm 上 エ UG : 


了 
eurn fa]se: の 


read : Funotion (EheName_ ){ 一 許 





theName_  += "= リ ": 
theCookie_ _ = qoocumern .cookie+":": 一 回 
Star 上 _ = theCookie_ .indexOfF (theName_ ): 一 回 
生ま GESYE ! 三 - せ せ ) 
end_ _ = theCookie_ .indexOFfF (":",Star も _ ): 
eturn unescape (theCookie_ .subst エ nd ゃ 、 
(start 上 _ +theName_ .1ength,end_ )): キャ デ 


} 


eurn Fa]18Se: 


トー 


… ク ッ キ ー へ の 書き 込み を 行う メソ ッ ド 

… ク ッ キ ー の 期限 を 指定 する (クッ キー デー タ の 保存 期限 は GMT (グリ ニッ ジ 標 準 時 ) に する 必要 が ある ) 
・ ク ッ キ ー に デー タ を 書き 込む 

・ ク ッ キ ー の デー タ を 読み 込む メソ ッ ド 

… ク ッ キ ー デ ー タ を 読み 込む 

… 指 定 さ れ た 名 前 の デー タ を 検索 する 

… デ ー タ が 存在 する 場合 は デー タ 値 を 返し 、 そ う で な い 場 合 は 「false」 を 返す 


回 回 回 回 回 占 


(@ 損 9】 映 旧 クッ キー の 読み 書き は 「document.Cookie」 に アク セス する 


JavaScript で は 、 デ ー タ を 保存 する た め の ク ッ キ ー フ ァイル へ の 書き 込み 、 読 み 出 し を サポ ー ト し て い 
ます 。 クッ キー ファ イル は 、「document.cookie」 で 参照 する こと が で きま す 。 クッ キー へ の 書き 込み は 、 
デー タ 名 と デー タ 値 、 そ し て デー タ の 保存 期限 を 指定 し ます 。 デー タ の 書き 込み 数 に は 上 限 が ある の で 、 
大 量 の デー タ 保 存 に は 向き ませ ん 。 また 、 恒 久 的 に 保存 され る わけ で は あり ませ ん 。 長期 間 に デ ー タ を 保 
存する 場合 に は 、CGI 経 由 で サー バー に 保存 する 必要 が あり ます 。 

クッ キー か ら の 読み 出し は 、「document.cookie」 に 該当 する 名 前 の デー タ が ある か どう か が 「indexOfO」 
を 使っ て 調べ ます 。 名 前 が あっ た 場合 に は 、 デ ー タ 値 を 取得 し ます 。 


(W'j[Wjiili さま ざま な JavaScript ラ イブ ラリ 
Ajax に より JavaScript が 再 評価 、 注 目 さ れ た お か げ で 数 多く の ライ ブラ リ が 作成 され て いま す 。 次 の 


URL で 数 多く の ライ ブラ リ に アク セス する こと が で きま す 。 


http://miniajax.Ccom/ 
http://Www.openSspc ら .org/JavaScript/Ajax/Library/index.html 


また 、 ク ッ キ ー に 関す る ライ ブラ リ は 次 の UHL に あり ます 。 


http://insin.woaf.net/code/javascript/cookiemanager.html 
http://Www.shiojiri.ne.jp/ openspc/js/ 
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オブ ジェ クト へ の 参照 を 代入 し て 
実行 速度 を 上 げ る 


JavaSoript は 、 プ ログ ラム を 実行 する た びに 命令 を 解釈 する イン タプ リタ 型 の 言語 で す 。 C 言 語 や | 
Java 言 語 な どの コン パイ ラ 型 言語 で は 、 コ ンピュータ が 解釈 で を る コー ド ( マ シン 語 ) に 変換 し て 実行 | 
する た め 、 速 度 が 高速 で す 。 し か し 、JavaScript な ど イ ンタ プリ タ 型 言語 は 毎回 命令 を 解釈 する た め 、 
速度 的 に は 低速 に な り ま す 。 1 

そこ で 、 プ ログ ラム を 工夫 し て 実行 速度 を 上 げ な けれ ば な ら な い 場 面 が で て きま す 。 JavaScript 
の 場合 、 文 書 構造 に も 依存 し ます が 、 基 本 的 に は オブ ジェ クト へ の 参照 を 一 度 変 数 に 入れ て お き 、 以 後 
その 変数 を 参照 する こと で 高速 化す る こと が で きま す 。 特に 「document.getElementByld()」 で 参 
照 す る 場合 に は 、 多 く の ブ ラウ ザ で 高速 化 で き Safari つ や Opera な ど で は ら 倍 ほど 高速 に 処理 が 行わ 
れ ま す 。 


window.on1oad = Funotion( ) { 
S = new Date( ) : 
For (Var i=0: 1<10000: ++) { 
document .getE1ementByTdq ( "resu1" ) . 1innerHTMI, = 
"Samp1e Tex ヒ ": 
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} 
e = new Date() 
tm1 = (e-s) / 1000: 


S = new Date( ) : 
ob] = document .getE1ementByTdq ( "resu1" ) : 
For (Var =0: 1<10000: ユ ++) { 
ob] . innerHTMT, = "Samp1e Text": 
} I 
e = new Date() : 
tm2 = (e-s) / 1000: 





document . getE1ementByTdq ( "上 1me" ) . innerHTMT, = tm1+ "<D ェ > "+Em2 









CHAPTER- 1 2 











sECTION | 上 


0】 ソリ ー ビ ュ ー を 表示 する 








ここ で は 、Yahoo UI ライ ブラ リ を 利用 し て 、 ツ リー ビュ ー を 表示 する 方 法 に つい て 解説 し ます 。 























田 検 索 エ ンジ - 


5 










検索 エン ジン 
Googlc 
Yahoo! 


Eoo 
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「 二 」 を クリ ッ ク す る と 、 ツ リー 
ビュ ー が 展開 され る 








吊 目 用 用 誠 際 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 
<meta hEp-equ1Y= "ConEen ヒ -Eype" conen ヒ =" て exE/htm1: 
CharSe ヒ =uF-8"> * 
< ヒュ 1 上 1@ ら > け aVaSC エ 1p 七 Samp1e</ ヒ 1 ユ モ 1]e> 
<11ink re]1="sty1eshee モ " hrefF="ocss/tree.css" 
type= "texE/css" media="a11"> + プ 
<1injk re1="sty1esheet" type="Eex 上 /css" hrefF="main.Css" = 
med1ia="a11"> を デ 
く SC1p ype= "tex / JaVaSC エ 1D ヒ "5 エ o="yahoo . 8 "></ SC エ 1p セ > 
< く SC エ 1Dp 上 上 ype=" ヒ @ ヒ / ]a マ aSC エ 1D 上 " S エ C="Qdom. 8 "></ SC エ ュ 1D ヒ > 
く SC エ 1D ヒ 上 上 ype=" ヒ ex 上 / る で aSC エ 1D 七 " SC= "eVen . 8S "></ SC エ 1Dp セ > 
で SC エ ュ 1D 上 上 De=" ヒ @Gx ヒ 上 / ]aVaSC エ 1D ヒ " S エ C= "モエ eeV1ew . 5 "></ SC エ 1D ヒ > 
く 8SC エ 1D 上 上 yYDe=" 七 @Gxx / ]a マ aSC エ 1D 七 " S エ C= "ma1n . 8 "></ SC エ 1 わ ヒ > 
</heaqd> の 





<body> 
<h1> リ ンク 集 </h1> 
<d1V 1d="reeData "></d1 マ > 
</body> 
</htm1> 


副 必要 な ライ ブラ リフ ァイル を 順番 に 読み 込む 


jm 当 目 用 用 本 本 司 あ main.js 


Yar 上 エ @@: 
window.on1oad = fFunotion( ) { 
tree = new YAHOO .widget . TreeView ( "treeData" ) : 一 馴 
Var root = tree.getRoo 七 ( ) : 一 話 
var node1 = new YAHOO .wiqdget . TextNode ( "検索 エン ジン " , root, False) : 一 話 
Yar ocNode1 new YAHOO .w1dget . TextNode ( "Goog1e" , node1, fa1se) | 





CE 





Yar CNode2 new YAHOO .widget . TextNode ( "Yahoo!", node1, fa1se) : 
Var CNode3 new YAHOO .widget . TextNode ( "goo" , node1, False) 


cNode1 .hreFfF "http : / /www .goog1e . co. Jp/ ": 
"http : / /www .yahoo . Co. Jp/ " : 


CNode2 .hrefE 
cNode3 .hreE "http : / /www . goo - ne . Jp/ " : 
tree .draw( ) : 一 回 


中 昌 昌 


人 太 納 IO 委 Zi -4 ヨ IdVH つ 帳 


トー 


… ツ リー ビュ ー オ ブ ジ ェクト を 生成 する 

… ツ リー ビ ピュー の 基準 と な る ルー トノ ー ド を 取得 する 
ルー トノ ー ド に テキ スト を 追加 する 

…「node 1 」 の ノー ド に テキ スト を 追加 する 

… ク リッ ク 時 の リン ク 先 を 設定 する 

… ツ リー ビュ ー を 描画 する 


@ 加 9】 遇 上衣 ソリ ー ビ ュ ー の ノー ド に 表示 テキ スト を 追加 する 

ツリ ー ビ ピュー を 表示 する に は 、Yahoo UI ライ ブラ リ を 利用 する と 簡単 で す 。 まず 、 ツ リー ビュ ー に 必要 な 
ライ ブラ リフ ァイル を 読み 込み ます 。 ツリ ー ビ ュ ー 表 示 に 必要 な ファ イル は yahoo.jS、dom.jS、event.jS、 
treeview.jS で す 。 実際 に 表示 する 部 分 に は <div> タ グ の み 用 意 し 、ID 名 を 指定 し て お きま す 。 

プロ グラ ム で は 「YAHOO.widget.TreeView()」 で ツリ ー ビ ュ ー オ ブ ジ ェクト を 生成 し ます 。 生成 され 
た ツリ ー ビ ュ ー オ ブ ジ ェクト の ルー トノ ー ド を 求め ます 。 ツリ ー ビ ュ ー で は 表示 され る テキ スト は 親 ノ ー ド を 
指定 する 必要 が あり ます 。 最初 の 項目 は ルー トノ ー ド に 連結 する 必要 が あり ます 。 

テキ スト ノー ド の 追加 は 、「YAHOO.widget.TextNode()」 で 行い ます 。 パラ メー タ に は 追加 する テキ 
スト と 親 ノ ー ド 、 階 層 化 され て いる 場合 に は 、 あ ら か じ め 展 開 表示 する か どう か を 「true」 ま た は 「false」 で 
指定 し ます 。 「true」 を 指定 する と 最初 か ら 展 開 表示 され 、「false」 を 指定 する と 展開 表示 され な く な り ま す 。 

表示 され る テキ スト が クリ ッ ク さ れ た と き に 他 の ペー ジ に 移動 させ る 場合 に は 、 追 加 し た テキ スト ノー ド 
の 「href」 プ ロ パ ティ に 表示 する ペー ジ UHL を 指定 し ます 。 設定 が 終了 し た ら 、「draw()」 メ ソ ッ ド で ツリ ー 
ビュ ー を 描画 し ます 。 























sEcTIoN | 調 


] 脱 還 略 プア コーディ オン 表示 を 行う 








ここ で は 、Adobe Spry フ レー ム ワ ー ク を 利用 し て 、 ア コー ディ オン 表示 する 方 法 に つい て 解説 し ます 。 


※Internet Explorer7 で は 、 パ ネル の タブ の 色 が 青く 表示 され ます 。 な お 、Internet Explorer の 場合 に は 、HTML が 
Transitional と それ 以外 で 挙動 が 変わ り ま す 。 








/ n 1 et | PT le 
CO [9 cmssoptsw < っ | X luw search CD - |@ cwsvesoiprsa | | x uve searen 


ー ト 食 -・- 還 < の ーー 





守 - 仙 | 人 @mvesomptsempe | | 信 ・ 還 <・ 加 < 


に 狗 avesorpt sampe 






OS の 種類 


番 多 < 利用 され て いる OS で す 。 い くつ か の 種類 が あり ます 。 


卒 に で も 手軽 に 扱え る こと を 目指 し た OS で す 。 
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、 画 コン ピュ ー タ | 保護 モー ド : 無 区 時 1009% ・ 、 末 コン ピュ ー タ | 保護 モー ド : 無効 





アコ ー デ ィ オ ン 表 示さ れ 、 パ ネル タブ を 
クリ ッ ク す る と 内 容 が 開閉 され る 
eXe 事 eg 当 目 用 目 index.htm 
< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01//EN"> 
<htm1] > 
<head> 
<meta h 上 上 p-eGqu1Y= "ConEenE-type" Conten ヒ = "Eeex 上 /htm] : 
CharSe ヒ =u 上 FE-8"> 
< 上 ヒュ 1 上 1e>JaVaSo エ 1p ヒ Samp1e< / 上 上 1e> 
<1ink re1="sty1eshee 上 " hrefF="SpryAocordion .CSS" 寺 。 
type=" texE/css" med1ia="a11"> 「 回 
<1ink re]1="sty1esheet" type="Eex モ 上 /cCss" hrefF="main.CS8" 
media="a11 "> 
話 一 <SC エ ip 上 Sro= "SpryAccordi on . 5 " yDe= " 七 @x ヒ / avVaSC エ 1D 上 "></ SC エ 1 や ヒ > 
< く SC エ 1p 上 上 yDe= "上 xx / る a マ aSC エ 1D ヒ 上 " 8 と C= "ma1n . 8 "></ SC エ ュ ユヒ > 
</head> 
< く body> 
<h1>08 の 種類 </h1> の 


2 


< く d1V 1d="Aooord1ion1" oc]1ass= "Accordi on " > 一軸 計 
<d ュ で oc]1ass= "AcoordionPane1 "> 一 胃 
<diV cass="AoocordionPane1Tab">W1indows</d1v> 一 回 
<d1iV co]1ass="AcoordionPane1Conten ヒ "> 
一 番 多 く 利 用 され て いる OS で す 。 いく つか の 種類 が あり ます 。 
そく /d1 マ > a 
</d1 マ > 
<div ol]1ass= "AccordionPane1 "> 
<diV cl]ass="AoocordionPane1Tab">Mac OS</d1 マ > 
<diV cl1ass= "AcocordionPane1ConenE "> 
誰 に で も 手軽 に 扱え る こと を 目指 し た OS で す 。 
く /d1 マ > 
< く /d1 マ > 
<d1V cass= "AococordionPane1 "> 
<diy cl]ass="AocordionPane1Tab">UNTX< / ュ マッ > 
<d1V class="AoocordionPane1Conten ヒ "> 
古く か ら あ る OS で す 。 Limux は UNTX 互 換 OS で す 。 
< く /d1i マ > 
く /d1 マ > 
く /d ュ マッ > 
</body> 
</htm1> 


"アコ ー デ ィ オ ン 表 示 に 必要 な スタ イル シー ト フ ァイル を 読み 込む 

… ア コー ディ オン 処理 を 行う ライ ブラ リ を 読み 込む 

… ア コー ディ オン 全体 を 囲む タグ を 指定 する (この ID 名 が アコ ー デ ィ オ ン 処 理 に 必要 に な る ) 
… ア コー ディ オン パネ ル 領 域 を 指定 する 

… ア コー ディ オン の タブ を 指定 する 軒 軒 アコーディオン で 表示 する 内 容 を 指定 する 


@ 可 当 上 用 用 本 WE 衣 main.js 


window.on1oad = fFunction() { 
var accOb}j1 = new Spry.W1dget .Accordion ( "Accordion1" ) : 一 名 











ReW[Xge 


} 


下 アコーディオン を 描画 / 設 定 する 





@ji 提 9】 遇 個 Adobe Spry フ レー ム ワ ー ク を 使っ て アコ ー デ ィ オ ン を 表示 する 

アコ ー デ ィ オン 表示 が で きる ライ ブラ リ は いく つか あり ます が 、Adobe Spry フ レー ム ワ ー ク を 使う と 手 
軽 に 処理 で きま す 。 アコ ー デ ィ オ ン を 表示 させ る た め に は 、 全 体 を 囲む <div> タ グ と パネ ル 領 域 、 パ ネル タ 
ブ 、 パ ネル 内 容 に 、 そ れ ぞ れ 特 定 の スタ イル シー ト の クラ ス を 設定 し ます 。 














HTML 文 書 で の 指定 が 終わ れ ば 、 プ ログ ラム で アコ ー デ ィ オ ン オ ブ ジ ェクト を 生成 する だ け で 機能 する 
よう に な り ま す 。 これ は 「Spry.Widget.Accordion()」 で パラ メー タ に アコ ー デ ィ オ ン 全 体 を 囲 の タグ の 
ID を 指定 し ます 。 
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sEcTION | 斉 


選 騙 和 有 バネ ル 表 示 を 行う 








ここ で は 、Adobe Spry フ レー ム ワ ー ク を 利用 し て 、 パ ネル 表示 する 方 法 に つい て 解説 し ます 。 














| 用 語 解説 


| mascriptc は マ | 
| 
| 
| 





JavaScmp1d は オブ ジェ クト 指向 の スク リブ ゴト 言 語 で す 。 
10 年 目 に し て 、 や っ と 注目 され る よう に に な り ま し た 。 




















上 | vaScript と は マ 
JavaScnpd は オブ ジェ クト 指 司 の スク リブ ト 言 語 で す 。 
10 年 目 に し て 、 や っ と 注目 され る よう に に な り ま し た 。 
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ペー ジ が 読み 込ま れる と 、 パ ネル が 表示 | ーーー エ ーー エー コレ F で と 
され る (パネ ル タ イ トル を クリ ッ ク し て 展 ya 
開 / 折 り た た むこ と が で きる ) 














9I@ 放 @ 


7 当 目 朋 目 index.htm 


< く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL 4.01//EN"> 
<htm1 > 
<head> 
<meta http-equ1Y= "comen-type" conten ヒ =" モ ex 上 /htm1: 
CharSe モ =uF-8"> + ご 
< モ ュ 1 上 1e>JayaSo て ip Samp1e</ ヒ ュ 1 上 1e> 
<1ink re1]="sty1eshee" hreF="SpryCo11apsib1ePane] .cs8" = 
type= "tex モ /css" media="a11"> \ | 回 
<11ink re1="sty1eshee" type="Eex モ /css" hreF="main.CSg" 
media="a11 "> 
ぐ く 8Cr1p 上 Sro="SpryCo11apsib1ePane1 .S" 
tyDe= "exxt / JaVaSC エ 1D ヒ "></ SC エエ セキ > を " 司 
く SC エ 1D ヒ 上 ype= "上 @ 棄 / る aVaSC エ 1D 上 " 8 エ C= "main . 8 "></ SC エ ュ ユヒ > 
</head> 
<body テ > 
<h1 > 用 語 解 説 </h1> 
<d1iY 1d="Co11apsib1ePane11" oc1ass="Co11apsib1ePane1 "> 一 医 の 


Em 


/ 


<d1iY oc1ass="Co11apsib1ePane1Tab">JavaSc と 1p 上 と は ?</di マ > 一 医 
<d ュ 1 oc1ass="Co11aps1ib1ePane1Con ヒ en ヒ "> 
<p>Java8c エ ip 上 は オブ ジェ クト 指向 の スク リプ ト 言 語 で す 。 < わ ェ > 
10 年 目 に し て 、 や っ と 注目 され る よう に に な り ま し た 。 
< く / や > 
< く /d1 マ > 
< く /d1 マ > 
く /d1 マ > 
<d1iY 1d="Co11apsib1ePane12" cl1ass="Co11apsib1ePane1 "> 
<di cl]1ass="Co11apsib1ePane1Tab">A]ax と は ?< /d1 マ > 
<diy cl]ass="Co11apsib1ePane1Conten ヒ "> 
<p>Ajax は JavaScrip 上 を 利用 し て 非同期 通信 を 利用 し て デー タ を や り と りす る も の で す 。 </p> 
く /d1 マ > 
く /d1 マ > 
</d1 マ > 
</body> 
</htm1> 


… パ ネル 表示 に 必要 な スタ イル シー ト フ ァイル を 読み 込む 

… パ ネル 処理 を 行う ライ ブラ リ を 読み 込む 

… パ ネル 全体 を 囲む タグ を 指定 する (この ID 名 が パネ ル 処 理 に 必要 に な る ) 
… パ ネル タブ を 指定 する 

… パ ネル で 表示 する 内 容 を 指定 する 





回 回 回 回 回 


Seewem ョ 当 目 用 | 本 和 mainjs 


window.on1oad = fFunotion() { 
Yar accOb}j1 = new 一 名 

Spry .Widget .Co11apsib1ePane1 ("Co11apsib1ePane11" ) : 
Yar accOb]2 = new Spry.Widget .Co11apsib1ePane1 
("Co11apsib1ePane12", { contenETsOpen:fFa1se }):- 回 





頭 パネ ル を 生成 し 表示 する 
話 パネ ル の 最初 の 表示 状態 を 閉じ る よう に する 





(@j 抽 3 中 秀 Adobe Spry フ レー ム ワ ー ク を 使っ て パネル を 表示 する 

Adobe Spry フ レー ム ワ ー ク を 使う と 、 手 軽 に パネ ル 表 示 を 処理 で きま す 。 パネ ル を 表示 させ る た め に 
は 、 全 体 を 囲む <div> タ グ と パネ ル タ ブ 、 パ ネル 内 容 に 、 そ れ ぞ れ 特定 の スタ イル シー ト の クラ ス を 設定 し 
ます 。 














HTML 文 書 で の 指定 が 終わ れ ば プロ グラ ム で パネ ルオ ブ ジ ェクト を 生成 する だ け で 機能 する よう に な り 
ます 。 これ は 「Spry.Widget.CollapsiblePanel()」 で パラ メー タ に パネ ル 全 体 を 囲 の タグ の ID を 指定 し 
ます 。 
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olEi で sl の IN CHAPTER-12 pl 1143 
也 旧 4 タブ パネ ル 表 示 を 行う 


ここ で は 、Adobe Spry フ レー ム ワ ー ク を 利用 し て 、 タ ブ パ ネル を 表示 する 方 法 に つい て 解説 し ます 。 




















@ 〇 仙 http://192.168.1。 ・ 


回 mlore 
次 |@Javascpt Sample ト | 合 -・- 還 = で < 





ペー ジ が 読み 込ま れる と 、 タ ブ パ ネル が 
表示 され る (タブ を クリ ッ ク す る と 対応 
し た 内 容 に 切り 替わる ) 





ブ プログ ラム 言語 の 説明 
Pen | Ruby | 
| CGI で 多く 使わ れ て いま す 















プロ グラ ム 言 語 の 説明 
_Per | Rey | mmmn | 
Gocgis 社 が 策 柱 89 こ 利用 し て いま す 








 @ イン ター ネッ ト | 保護 モー ド : 有効 。 





人 W イン ター ネッ ト | 保護 モー ド : 有効 





の 0@ 事 @ 


@ 可 当 目 用 用 馬 員 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML, 4 .01 Transitiona1 / /EN"> 
<htm1] > 
<head> 

<meta h ヒ モ p-equ1 マ = "ConEen ヒ -t 上 ype" conten ヒ =" tex 上 /htm] : 

Cha エ SG キ =u 革 F-8"> 

< ヒュ 1 上] 6> ゴ aa8C エ ip 上 Samp1e< / 七 1 上 1e> 

<11nk て e1="sty1eshee" href="SpryTabbedPane1S.CSS" 和幸 。 

type=" て tex モ /css" media="a11"> で 記 ] 

<1ink re1="sty1eshee" type="EexE/css" hrefF="main.CSS" き - 

med1ia="a11 "> ぐー の 


) 


<8Cr1p sro="SpryTabbedPane1s .]s" 
YDe= "上 G 広 上 / する で び aS ご エエ や ヒ "></ SC エ ュ 1p キ > | 回 
< く 8Cr1p 上 上 ype= "上 ex 上 / ] る VaSC エ 1D ヒ "SC= "ma1n . 8 "></ SC エ 1D セ > 
</head> 
<body テ > 
<h1> プ ログ ラム 言語 の 説明 </h1> 
<diy c1ass="TabbedPane1s" 1q="EtabPane11 "> 一 回 
<u1 class="TabbedPane1sTabGrouDp "> 
<11 olass="TabbedPane]sTab" tabindex=" 0 ">Per1</1 ュ > 
<1i cl1ass="TabbedPane] sTab" tabindex=" 0 ">RuDy</ ユエ > 
<11 cl1ass="TabbedPane1sTab" tabindex=" 0 ">Py 上 hon</ 1 ュ > 
< く /u] テ > 
<div cl1ass= "TabjbedPane1 SCon 上 en 上 G エ OUD "> 
<divy c1ass="TabbedPane1sContent ">CGT で 多く 使わ れ て いま す </d ュ マッ 
<diy oc]1ass="TabbedPane1sConten ヒ ">Per1 よ り 簡 単 手軽 で す </d1 マ > 
<diy ol1ass="TabbedPane1sContent"> 
Goog1e 社 が 積極 的 に 利用 し て いま す </d ュ マ > 
く /d1 マ > 
く /d1 マ > 
</body> 
</htm1> 


… タ ブ パ ネル 表示 に 必要 な スタ イル シー ト フ ァイル を 読み 込む 

… タ ブ パ ネル 処理 を 行う ライ ブラ リ を 読み 込む 

… タ ブ パ ネル 全体 を 囲む タグ を 指定 する (この ID 名 が タブ バ パネル 処理 に 必要 に な る ) 
… タ ブ を 指定 する 

… タ ブ 内 容 を 指定 する 














回 回 回 回 回 





Ialeem 当 目 用 用 本 瑞光 mainjs 


w1ndow.onload = funotion() { 
Yar bOb]j1 = new Spry .Widget . TabbeqdPane1 s ( "tabPane11" ) : 一 名 


} 


本 タブ パネ ル を 生成 し て 描画 する 


@ 抽 9】 回 衣 Adobe Spry フ レー ム ワ ー ク を 使っ て タブ パネ ル を 表示 する 

Adobe Spry フ レー ム ワ ー ク を 使う と 、 手 軽 に タブ パネ ル 処 理 を 行う こと が で きま す 。 タブ パネ ル を 表 
示す る に は 、 全 体 を 囲む <div> タ グ と パネ ル タ ブ 、 パ ネル 内 容 に それ ぞ れ 特定 の スタ イル シー ト の クラ ス を 
設定 し ます 。 


HTML 文 書 で の 指定 が 終わ れ ば 、 プ ログ ラム で パネ ル タ ブ オブ ジェ クト を 生成 する だ け で 機能 する よう 
に な り ま す 。 これ は 「Spry.Widget.TabbedPanels()」 で パラ メー タ に パネ ル タ ブ 全体 を 囲 の タグ の ID 
を 指定 し ます 。 
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ES NI CHAPTER-12 144 


] 44 タブ に 表示 する 内 容 を 別 フ ァイル 
に し て 非同期 で 読み 込ま せる 
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ここ で は 、Yahoo UI ライ ブラ リ を 使っ て タブ に 表示 する 内 容 を 別 フ ァイル に し 、 非 同期 で 読み 込ま せる 方 法 
に つい て 解説 し ます 。 












プロ グラ ム 言語 の 説明 


Pe 員 Python 
旧 PGIC 多 く 使わ れ て いま す 。 
は 











b が 普及 する 以前 か ら 便利 な 言語 と し て 利用 され て いま し た 。 












ブロ グラ ム 言 語 の 説明 


Pe 












by Python 


ed より 舌 単 手軽 で す 。 
r on Ras で 有名 に な り ま し た 。 


















ペー ジ が 読み 込ま れる と 、 非 同期 で 内 容 
が 読み 込ま れる (タブ を クリ ッ ク す る と 
対応 する 内 容 に 切り 替わる ) 


Re7WXe%@ り 肝 目 用 目 index.htm 


く !DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMTL, 4.01 Transitiona1 / /EN"> 
<htm] > 
<head> 

<meta h 上 上 p-@Gqu1 マ = "Conten ヒ -type" conten ヒ ="Eext/htm1]: 

CharSe ヒ =uF-8"> 1 

< ヒュ 上 1e>JaVaSor1p ヒ Samp1e</ 上 1 上 1]e> 

<1ink re]="styleshee" hrefF="tabs .oCss" 

type="Eex 上 /css" media="a11 "> 

<1ink re1="sty1eshee" hrefF="borqder_Eabs . css" 

type="text/css" media="a11"> 

<1ink re]="styleshee 上 " type="Eex 上 /oss" 

hreF="main.CsS" media="a11 "> 

く 8C エ 1p 上 ype="Eex 七 / aaSC エ 1D ヒ " て co="yahoo . 8 "></ SC エ 1D セ > 

ぐ SC エ ip tyDe= "上 ex / avVaSC エ 1D ヒ 上 " Ss エ o="Gdom.]S "></ SC エ 1D セ > 

く SC エ ip 上 ype= "上 ex / aaSC エ 1D ヒ " 5 エ o="even . 8S "></ SC エエ D セ 上 > 

く SC エ 1Dp ヒ 上 ypDe= "上 ex / aaSC エ 1D 上 " 8S エ oc="oConneoion . 8 "></ SC エ iD セ > 

く SC エ 1D type="Eex 上 /JaVvaSC エ 1p 上 " sro="Eabview . 8 "></ SC エ 1p セ > 

く 8C エ 1 上 上 YDe= "上 @Gx 上 / Ja で aSC エ 1D" Sro= "main .]S"></ SC エ 1p> 


</head> の 





< くわ ody テ 
<h1> プ ログ ラム 言語 の 説明 < /h1> 
<d ュ 1 1d="1nfFormationTab" c1aSs= "yui-navSe ヒ "></d1V> 一 放置 
</body> 
</htm1> 


頭 必要 な スタ イル シー ト フ ァイル を 読み 込む 防 還 Yahoo UI ライ ブラ リ を 読み 込む 
医 全体 を 囲む タグ を 指定 する 


go 思 邊 有朋 本 ES 前 manjs 


window.on1oad = funotion( ) { 
var tabOb] = new YAHOO .widget . TabView ( "infFormationTab" ) : 一 怠 
tabOb〕 . addTab (new YAHOO .widget . Tab( { 一 話 
1abe1 : " Per]1 ", 一 回 
dataSro : "./Eab1 . モ x" , 一 詠 
active : 上 rue 一 回 
} ) ) : 
tabOb]} . adqTmab (new YAHOO .widget . Tab( { 
1ape1 : " RUuBVY ", 
Ga も EaSPG 5 の 7 だ AD25IEE" 
周 選 
tabOb〕] . addTab (new YAHOO .widget . Tab( { 
政 員 誠人 @ せ 1 PBRXMEEBRGOY " 
仙 寺 も 洒 員 ま も あ 有 3 。 も 蘭 も “ 
9 
YAHOO . ut 1 .Event . onContentReady ( "doc" , Function() { 
tabView . appendTo ( " infFormationTab" ) : ja 
}) 

















台 タブ ビュ ー オ ブ ジ ェクト を 指定 する 罰 還 タブ を 追加 する 
… タ ブ に 表示 する 文字 を 指定 する 陳 時 読み 込む B テ キス ト フ ァイル の UHL を 指定 する 
話 最初 の 表示 する よう に 指定 する 罰 還 ペー ジ が 読み 込ま れ た ら タ ブ ビ ュー オブ ジェ クト を 構築 する 


@7i 計 】 還 秀 Yahoo | ライ ブラ リ の タブ ビュ ー を 使っ て 非同期 で 読み 込ま せる 


非同期 で タブ ビュ ー の 内 容 を 設定 する に は 、Yahoo UI ライ ブラ リ を 使う と 便利 で す 。 タブ ビュ ー に 必要 
な ライ ブラ リフ ァイル で ある yahoo.js、dom.jS、event.jS、connection.jS、taDview.jS を 順番 に 読み 込ま 
せま す 。 

HTML 文 書 内 に は タブ ビュ ー を 表示 する た め の <div> タ グ を 用 意 し 、 ク ラス 名 と ID 名 を 指定 し て お きま す 。 


プロ グラ ム で は 「YAHOO.widget.TaDView()」 で ツリ ー ビ ュ ー を 生成 し 、「addTab()」 で 表示 する 内 容 を 
設定 し ます 。 非同期 で 読み 込ま せる 場合 に は 「dataSrc」 オ プシ ョ ン に 読み 込む ファ イル URL を 指定 し ます 。 

設定 が 終わ っ た ら 、「YAHOO.util.Event.onContentReady()」 で ペー ジ が 読み 込ま れ た 際 に ツリ ー 
ビュ ー を 生成 する よう に し ます 。 








箇 紀 IO 眼 1 -4 ヨ IdVH つ 自 











Eske 還 有明 [し JCHApresn2 [| 2s] 


選 階層 化 メ ニュ ー を 表示 する 








太 引 I1O 上 1 -3 ヨ ldVH つ 自 








ここ で は 、Adobe Spry フ レー ム ワ ー ク を 使っ て 、 階 層 化 メニ ュー を 表示 する 方 法 に つい て 解説 し ます 。 
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凌 信 |@mwesoptsampe | | 合 ・ 回 ・ 下 ・ 


|]? 
ブロ グラ ム 言 語 の 基礎 知識 
ブロ グラ ム 言 語 ・ 言 語 


困 http://192.168.1.: > 


@O 


次 |@avespt sample 

















|e Search の 











プロ グラ ム 言 語 の 基礎 知識 


rw 還 還 


工 言 語 と は ? 


ET …… 
Ped 


Ruby 


Python 












階層 化 メ ニュ ー が 表示 され る 












eXeg 事 eg 当 目 用 用 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm1> 
<head> 
<meta htp-equ1Y= "Conen ヒ -type" oconten ヒ ="Eex 上 /htm] : 
CharSe=utF-8"> 
< キュ 1 上 1e>JaVaScCrip 上 Samp1e</ ヒ 1 上 1e> 
<11ink re1="sty1eshee" hreF="SpryMenuBarHor1zonta] .css" 
type="text/css" media="a11 "> 」 
<1ink re1="sty1eshee" type="Eex 七 /css" hrefF="main.cCss" 
media="a11 "> 
くそ 8C エ 1Dp 上 Sro= "SpryMenuBar . 5S" Eyjpe=" ヒ ex モ / ゴ avaSC エ 1p 上 "></ soript> 一 久 
く SC エ 1p yYDe= " ヒ @x 七 / aaSC エ 1D 七 " SC="main . 8 "></ SC エエ わ ヒ > 
</head> 
<body テ > 
<h1> プ ログ ラム 言語 の 基礎 知識 </h1> 
<u] 1d="MenuBar1" cl1ass= "MenuBarHorizona1 "> 一家 
<11><a ol1ass="MenuBar エ temSubmenu" hreF="#"> プ ログ ラム 言語 </a> 一 罰 


<u]> 
<1 ユ 1><a hreF="# リ > アセ ン ブ リ 言語 と は ?</a></1 ユ 1> 
< ユエ ><a hreF="#" リ > コン パイ ラ と は ?< /a></ ユ > の 
<11><a hrefF="#"> イ ンタ プリ タ と は ?< /a></ 11> 


の 


</u1> 

</] ユ > 

<11><a c1ass= "MenuBarTtemSubmenu" hreF="#">LT 言 語 </a> 
そい u] > 


< ユエ ><a hreF="#">LL 言 語 と は ?</a></ ユ ュ ッ > 一 訪 
<11><a cas5= "MenuBa エ エ EemSubmenu" h エ eF="#"> 他 言語 と の 比較 </a> 
< くい u ユ > 
<11><a hrefF="#"> 従 来 の 言語 </a></ ユ 1> 
<11><a hrefF="#"> 現 在 の 言語 </a></11> 
< く /u]> 

</1i> 

<1 ユ 1><a hrefF="#" リ >Per]</a></ ユ 1> 

<11><a hrefF="#">Ruby</a></ ユ エッ 

< ユエ ><a heF=" 提 ">Py 上 hon</a></ ユ エッ 

く /u ユ > 
< アユ エミ も デ 
< く /u1> 
</body> 
</htm1> 


頭 必要 な スタ イル シー ト フ ァイル を 読み 込む 
許 階層 化 メ ニュ ー を 表示 する た め の Adobe Spry ラ イブ ラリ を 読み 込む 
話 メニ ュー バー 全体 を 囲む 領域 を 設定 する 

話 メニ ュー バー 項目 を 指定 する 
回 
回 





… メ ニュ ー を 指定 する 
… 階 層 化 する に は <ul> タ グ を 入れ 子 に し 、 ス タイ ル シ ー ト の 「MenuBarltemSubmenu」 ク ラス を 指定 する 


eemee 妥 目 用 | 本 WE 靖 mainjs 


window.on1oad = Funotion() { 
Ya hMenu1 = new Spry .Widget .MenuBar ( "MenuBar1" ) : 一 騙 


} 





頭 メニ ュー バー を 生成 し 表示 する 


(@ 柄 5) 軸 秀 階 層 化 は <u> タ グ を 入れ 子 に し て 実現 する 


階層 化 メ ニュ ー を 表示 する ライ ブラ リ は いく つか あり ます が 、 基 本 的 に は HTML の タグ 構造 は 同じ で す 。 
リス ト タ グ で ある <ul> を 入れ 子 に し て ライ ブラ リ 固 有 の スタ イル シー ト の クラ ス を 指定 し ます 。 

サン プル で は Adobe Spry フ レー ム ワ ー ク を 使っ て 階層 化 メ ニュ ー を 実現 し て いま す 。 Adobe Spry 
で は メニ ュー 全体 を 囲 の タグ の スタ イル シー ト の クラ ス 名 に 「MenuBarHorizontal」、 階 層 化 メニ ュー を 


表示 する リス ト の <a> タ グ に は 「MenuBarltemSubmenu」 ク ラス を 指定 する だ け で 実現 する こと が で 
きま す 。 

HTML の 設定 が 終わ つた ら 、 プ ログ ラム で は [「Spry.Widget.MenuBar()」 と し て メニ ュー を 構築 し ます 。 
パラ メー タ に は メニ ュー 全体 を 囲む ID 名 を 指定 し ます 。 














箇 紀 II1O <| -d ヨ IdyHO 自 








SEG3IN 旨 (し 」cHPrem2 | 」i4e] 





『el スラ イダ ー を 表示 する 








遼 至 IO  Zl dldyHO 自 





ここ で は 、socript.aculO.us ラ イブ ラリ を 使っ て 、 ス ライ ダー を 表示 する 方 法 に つい て 解説 し ます 。 








すす | X | Live sea 


2 rep:/nezeen 




















本 書 の 評価 
悪い 一 一 良 い 





スラ イダ ー を ドラ ッ グ する と 、 
割合 が 表示 され る 








ReWXe 事 %@ 当 目 用 目 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Trans1tiona1 / /EN "> 
<htm] > 
<head> 
<meta hD-equ1 マ = "Conen ヒ -t 上 ype" Conten モ ="Eex モ /htm1: 
CharSe ヒ =u 上 F-8"> c + デ 
< 上 キュ 上]e>JavaSoc て ip Samp1e</ 二 1 ユヒ 1e> 
<1ink re1="styleshee" type="tex/css" hrefF="main.CsS" W。 
media="a11 "> 4 
< く 8C エ 1p 上 ype= "ex / る VaSC エ 1D 上 " 8 エ C= "poEotyDe . 8 "></ SC エ 1p セ > 
く 8SC エ 1D 上 ype= "ヒヒ / Ja マ aSC エ 1D 七 " 5S エ = "SC エ 1pEacu1ous . 8 "></ SC エ 1D ヒ > 
く 8C エ 1Dpt 上 ype= "上 @Gx 七 / る VaSC エ 1D 上 "8 エ o= "ma1in . 8 "></ SC エ ュ 1D ヒ > 
</head> 
<bod ア > 
<h1 > 本 書 の 評価 </h1> 
<diY> 悪 い ー 一 良い 
<d1iY 1d="s11derBG" > 一軍 
<d1iY 1d= "pointer"></d ュ マッ > 一 由 
< く /d1 マ > 
< く d1 1d=" エ eSu1 上 "></d ュ 1 マッ > 
</body> 
</html > 


台 ス ライ ダー 全体 の 領域 を 指定 する 
話 スラ イダ ー の ポイ ンタ を 表示 する 領域 を 指定 する 


Seie ヨ eem 当 目 用 | 本 RS 靖 main.js 


window.on1oad = Funotion( ) { 


new Contro1 . S11dqder ( "po1nter" , "s1iqderBG" , {一 視 
s11iqerVa1lue : 0, 一 話 
onChange : Function (va1ue ) { 一 放 


$( "resu1]" ) . 1nnerHTMT, = Math.F]1oor(value * 100)+ "も": 


}。 
onS11de : Function (va1ue) {一 許 
("resu1 ヒ " ) .1nnerHTMT, = Math.F1oor(Value * 100)+" 先 ": 
} 
1 京 記 : 


スラ イダ ー オ ブ ジ ェクト を 生成 する 。 ポイ ンタ 領域 と スラ イダ ー 領 域 を 指定 する 。 
スラ イダ ー の 初期 値 を 指定 する 監 軒 スラ イダ ー 値 が 変化 し た 時 に 表示 処理 を 行う 
スラ イダ ー が ドラ ッ グ し て いる 時 に スラ イダ ー 値 の 表示 処理 を 行う 


eeleei 当 目 用 用 eS 光 main.css 


body { 


} 


background- で Co1 or : #FFF: 
Co1o エ :#333: 
Font-size:80 も : 
1ine-height:1.8: 


Et 還 菩 ) 


} 


Font-sgize:14p: 
CoO :#777: 
padding: 0: 
mardin:0: 


#pointer { 


} 


w1qth : 5px: 

height : 10px: 
background- 1made :u エ 1 (Don .dif) : 
backdroundー エ GDGa 七 : nmOー エ GDGa ヒ 


#s11derBG { 


} 


w1dth : 200px: 
height : 4Dxx: 
background- 1made :u エ 1 (bg .gif) 
DacCkKd9rOumnQdー- エ GDGa 七 : nmO- エ GDGa 七 : 


#resu1 { 


mard1nーOD : 2 0px: 








剛 瑞 IO Cl - ヨ IdVH つ 自 


箇 納 IO 和 Zl 4 ヨ 1dyH つ 自 














@ 損 当 g】 還 人 衣 Control.Slider で スラ イダ ー の 生成 と 設定 を 行う 


スラ イダ ー を 表示 する に は 、script.aculo.us ラ イブ ラリ を 使う と 便利 で す 。 script.aculo.us ラ イブ ラリ 
を 利用 する に は prototype.jJS ラ イブ ラリ が 必要 な の で 、 あ ら か じ め 読 み 込 ませ て お きま す 。 

スラ イダ ー を 表示 する た め に HTML 文 書 内 に <div> タ グ で スラ イダ ー 全 体 の 領域 と ポイ ンタ 領域 を 用 意 
し ます 。 スク リプ ト で 「Control.Slider()」 の パラ メー タ に スラ イダ ー の ポイ ンタ と 全体 の 領域 を 指定 し ま 
す 。 スラ イダ ー は 、 各 種 オ プシ ョ ン が 用 意 さ れ て いま す 。 スラ イダ ー の 初期 値 は 、「sliderValue」 で 設定 す 
る こと が で きま す 。 スラ イダ ー が 操作 され る と 、「onSlide」 イ ベン ト が 発生 する の で 対応 する 処理 を 指定 す 
る こと が で きま す 。 スラ イダ ー の 操作 が 終わ っ た と き に 値 が 変化 し た 場合 に は 、「onChange」 イ ベン ト が 
発生 する の で 対応 する 処理 を 指定 する こと が で きま す 。 スラ イダ ー 値 は 標準 状態 で は 0 1 で す が 、 任 意 
の 値 に 変更 し た い 場 合 に は オプ ショ ン で 「range:$H(0.100)]」 の よう に 指定 する こと が で きま す 。 この 場 
合 、 ス ライ ダー 値 の 範囲 は 0 100 ま で の 数 値 に な り ま す 。 






































人 [nil Yahoo UI ライ ブラ リ の スラ イダ ー 


スラ イダ ー 処 理 は script.aculo0.us ラ イブ ラリ だ け で な く 、Yahoo UI ライ ブラ リ な ど で も サポ ー ト され て 
いま す 。 Yahoo UI ライ ブラ リ の 場合 、 縦 模 の スラ イダ ー と 二 次 元 の スラ イダ ー が 用 意 さ れ て いま す 。 
Yahoo UI ライ ブラ リ を 利用 し た 横 ス ライ ダー の 場合 、 次 の サン プル の よう に な り ま す 。 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1] / /EN"> 
<htm1] > 
<head> 
<meta htp-equ1v= "ConEen-type" conten ヒ ="Eex 七 /htm] : Charse 上 =uF-8 "> 
< モ ュ 上 1e>Samp1e</ 上 1 上 1@6> 
<1ink re]1="styleshee" hrefF="main.css" type="text/ocss" 
med1ia="a11 "> 
<1ink re]="sty1esheet" hreF="]1ogger.cCs5" type="Eex 上 /css" 
media="a11 "> 
< く 8SCr1p 上 上 yDpe= "上 ex 上 / ] る VaSC エ 1D ヒ 上 " 5S エ Co= "yahoo . ]S "></ SC エ 1p や ヒ > 
く 8C エ 1D ヒ 上 ype= "上 ex / Ja るび aSC エ 1D 上 " So= "dom .]S "></ SC エ ュ 1 や キ > 
く 8C エ 1D 上 上 ype= "ex / ] る ひび aSC エ 1D 上 " Sro=" even . ]S "></ SC エ 1 や キテ 
<8SC エ 1p ヒ 上 ypDe= " 七 Gx 七 / aaSC エ 1 上 " 5 エ o= "add エ oD . 8 "></ SC エ 1D モ > 
く 8C エ 1p 上 上 yDe= " 七 @ 上 / aaSC エ 1D 上 "5 エ C="S11der . 8 "></ 8C エ ュ わ ヒ > 
く 8C エ 1p 上 上 yDe= " 七 @ 文 上 / aaSC エ 1D 上 "><!ーー 
Ya エ 8S11Qder: 
window.on1oad = funotion( ) { 
S11der = YAHOO .widget .S1iqder . detHor1zS11Qder 
("s1iqderBG" , "s1iqderThumb", 0, 100, 5): 
} 
/ / ーー></ SC エ 1D キ > 
</head> 
<bod ツ > 
<Q1V 1d="S11derBG"><d1iV 1d="s11derThumb"><1md SrC="pr .d1fF "></1 マ > 
< く /d ュ マテ > 
</body> 
</htm] > 








S っ SECTION 間 CHAPTER-12y| |14Z 
| 販 玉 カレ ンダ ー を 表示 する 


ここ で は 、Yahoo UI ライ ブラ リ を 使っ て カレ ンダ ー を 表示 する 方 法 に つい て 解説 し ます 。 








カレ ンダ ー が 表示 され 、 日 付 
March 2007 。 ゆ | を クリ ッ ク す る と 、 その 日 付 
Su Mo Tu We Th Fr Sa が ペー ジ 上 に 表示 され る 
25!26|27|29|1|2|3 
4 5 6 7 8 9 10 
11 12 13 14 15 16 17 
18 19 20 話 証 22 23 24 


25 26 27 29 30|31] 


1 








選択 され た 日 付 :2007 年 3 月 1 日 


@ March2007 ゆ ゅ 
Su Mo Tu We Th Fr Sa 
25|262728 1|2|3 
4 5 6 7 8 9 10 
11 12 13 14 15 16 17 
18 19 20|21| 22 23 24 
25 26 27 28 29 30|31] 
11213「41516|7 





| 
| 人 g イン ター ネッ ト | 保護 モー ド : 有効 














| ⑳ イン ター ネッ ト | 保護 モー ド : 有効 





sej 当 目 用 用 本 唐 珍 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4.01 Transitiona1 / /EN"> 
<htm] > 


<head> 
<meta h ヒ 上 わ -@Gqdu1 マ = "で Con モ en ヒ - 上 ype" Conten ヒ ="Eext/htm1 : a 
CharSe ヒ =u 上 F-8"> ェ ン 


< 上 ti 上 1]e>JavaScr て ip Samp1e</ ヒ 1 上 1e> 

<1ink re]="styl1esheet" hrefF="css/ca1endar .Cs8" で 

type="text/css" media="a11"> +* ブ 

<1ink re]="styl1eshee" ype="Eex 七 /css" hrefF="main.Css" ゃ 、 
media="a11 "> 4 ご の 











環 串 り 目 | -J コ IdayHO 自 


個 渦 IO 委 1 - ヨ ldVHO つ 自 








<SC エ 1p 上 上 ype=" ヒ @ 上 / Ja る VaSC と 1p ヒ "5 エ o= "yahoo . ]S "></ SC エエ D モ > 
<8C エ 1p ype=" ヒ ex / る a マ aSC と 1D 上 " 5 エ C= "dom .]S "></ SC エ 1D キ > 
<8C エ 1D 上 上 yDe=" ヒ 6xx 上 / ]a マ で み SC て 1D ヒ "5S エ C="GVen . 8 "></ SC エ 1p セ > 
<8C エ 1p ヒ 上 上 ype= "も ex / ]aVaSC エ 1D ヒ " SC="oa1endar . ]S "></ SC エ 1p キ > 
<SCr1p 上 ype= "上 ex ヒモ / ]aVaSC エ 1D ヒ "SC= "ma1m . 8 "> く </ SC エ 1D ヒ > 

</head> 

< くわ Dody テ > 
<h1> カ レン ダー</h1> 
< く d1V 1d=" エ eSu1 上 "></d1 マ > 
<d1iY 1d="myCa1endar"></d1v> 一 許 

</body テ > 

</htm1> 


副 Yahoo | ライ ブラ リ を 読み 込む 
話 カレン ダー を 表示 する 領域 を 指定 する 


ETHI 財 main.js 


window.on1oad = Eunoction( ) { 
Yar myCa1endar = new YAHOO .wiqdget .Ca1endar ( "ca1" , "myCal1endar" ) 「 回 
myCa1endar .render( ) : 
myCa1endar . se1ectEvent . Subscribe ( Function (eventName, se1ectDate) { 





SOURCE COD 


Var y = new Sring(se1ectDate) . Sp1it(",") [0]: 
Ya m = new String(se1ectDate) . sp1it(",") [11: 
Yar dQ = new Sring(se1ectDate) . Sp11t(",") [21: 


documert . getE1ementByTd ( "reSu1" ) .1innerHTMTL, = 
山 選択 され た 日 付 : 山 + ツ オ LE: コ LESiE コ 『 月 山 + キ d+ ロ 日 山 H 
} , myCa1lendar, 上 ruG) : 


副 カレンダー オブ ジェ クト を 生成 し て ペー ジ 上 に 表示 する 
話 日 に ちら が クリ ッ ク さ れ た と き に 日 付 を 表示 する 

















(@ 損 9】 映 但 Yahoo | ライ ブラ リ の カレ ンダ ー を 利用 する 


カレ ンダ ー を 表示 する に は 、Yahoo UI Library を 使う と 便利 で す 。 カレ ンダ ー を 表示 する た め に 必要 な 
ライ ブラ リフ ァイル 、yahoo.jS、dom.jS、event.jS、calendar.jS を 読み 込み ます 。 HTML 文 書 で は カレ ン 
ダー を 表示 する 領域 を <div> タ グ で 指定 し ます 。 

プロ グラ ム で は 、「YAHOO.widget.Calendar()」 と し て カレ ンダ ー オ ブ ジ ェクト を 生成 し ます 。 カレ ン 
ダー の 表示 は 、「render()」 で 行い ます 。 





カレ ンダ ー 上 の 日 付 が 選択 され た 場合 に 日 付 を ペー ジ 上 に 表示 する に は 、「selectEvent.subscribe 
()」 と し て 選択 時 の イベ ント を 設定 し ます 。 イベ ント ハン ドラ に は 選択 され た 日 付 が 渡さ れる の で 、 こ れ を 
整形 し て ペー ジ 上 に 表示 し ます 。 

な お 、Yahoo UI ライ ブラ リ が 用 意 し て いる カレ ンダ ー に は 、 同 時 に 2 ヶ月 分 表示 で きる デュ アル カレ ン 
ダー も あり ます 。 








3eke が 遇 | 
販 カラ ー ピ ッ カ ー を 表示 する 








ここ で は 、 カ ラー ピッ カー を 表示 する 方 法 に つい て 解説 し ます 。 























⑳ イン ター ネッ ト | 保護 モー ド : 有効 





テキ スト フィ ー ル ド 上 を クリ ッ ク す る と 、 
カラ ー ビ ピッ カー が 表示 され る 





ReiXawe 当 目 用 用 同 央 際 index.htm 


<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTML 4.01 Transit1iona] / /EN"> 
<htm1 > 
<head> 
<me ヒ ta h ヒ 上 わ -eGqdu1Y= "ConEen ヒ -t 上 ype" conten ヒ ="Eex モ 上 /htm1: 。。 
CharSe ヒ =utF-8"> (… 
< ヒュ 上]1e>JavaSCr1p ヒ 上 Samp1e</ ヒ 1 上 1e> 
<11njk re]="sty1eshee 上 " hreF="Co1OrP1oker .CSS" 
type="tex モ /css" media="a11"> っ 田 
<1ink re]="sty1esheet" type= "tex モ /oss" hreF="main.CSS" = 
media="a11 "> + プ の 








耐 IO Cl -4dIdAVH つ 自 


<8SC エ 1p yDpe=" 七 @x ヒ 上 / avVaSC エ 1p キ " 
SC= "1 1b/ や p エ ototyDe . 8 "></ SC エ 1p ヒ > 
<8SC エ 1p 上 上 ye= "ヒヒ / ゴ a マ aSC エ 1p セ 上 " 
S エ で =" ] 1 わ / SC エ 1p 上 acu1ouS . 8 "></ SC エ 1p セ > = 
<8C エ 1p 上 上 ype= "上 ex 七 / る VaSC エ 1p キ " 
Sc= "11b/yahoo . Co1or . ]S "></ SC エエ 1p セ ヒ > 
<8C エ ip 上 ype="Eex 七 / avVaSC エ 1p" 
SC=" 11b/cCo1orPioker . 8 "></ SC エ 1p セ > 
<8C エ 1pt ype=" ヒ ex 上 / aaSC エ 1Dp 七 " 5 エ C= "ma1m . 8S "></ SC エ 1D ヒ > 
</head> 
<bod ツ > 
<h1> カ ラー ピッ カー</h1> 
<fForm> 
<1nput type= "tex モ 上" 1d="Co1orEie1d" Va1ue="FF33FF"> 一 話 
</ form> 
</body> 
</htm1> 


台 カラ ー ビ ピッ カー の 表示 に 必要 な スタ イル シー ト フ ァイル を 読み 込む 
話 カラー ピッ カー の 表示 に 必要 な ライ ブラ リフ ァイル を 読み 込む 
医 テキ スト フィ ー ル ド に ID 名 を 指定 する 


師 洒 IO 委 Z1 -3 ヨ ldYH つ 自 


ReiWeeej 当 目 用 用 本 RS 二 衣 参 main.js 


window.on1oad = fFunotion( ) { 
new Contro1 .Co1orPicojkker ("col1orEie1d" , { TMAGE _ BASE : "img/" }): 一 馴 
} 





台 カラー ビッ カー を 生成 する (この 時 点 で は 表示 され な い ) 


@ 加 9】 映 租 カ ラー ビッ カー を 表示 する ライ ブラ リ を 利用 する 
カラ ー ピ ッ カ ー を 表示 する に は 、 次 の ライ ブラ リ を 利用 する と 簡単 で す 。 


http://www.knallgrau.at/code/colorpicker 


この ライ ブラ リ は prototype.jS、Script.aculo.us を 利用 し て いる の で 、 あ ら か じ め 読 み 込ま せ て お きま 
す 。 HTML 文 書 で は カラ ー ピ ッ カ ー を 表示 する 時 に 必要 と な る テキ スト フィ ー ル ド と ID 名 を 指定 し ます 。 


プロ グラ ム で は 、「Control.ColorPicker()」 と し て カラ ー ピ ッ カ ー を 表示 する 際 に 読み 出す テキ スト 
フィ ー ル ド の ID 名 を 指定 し ます 。 2 番目 の オプ ショ ン パ ラメ ー タ に は 、 ラ イブ ラリ が 使用 する カラ ー ピ ッ カ ー 
の 画像 な ど が 格納 され て いる パス を 指定 し ます 。 

サン プル で は カラ ー ビ ピッ カー で 色 を 指定 する と 、 自 動 的 に テキ スト フィ ー ル ド の 背景 色 / 値 も 変化 し ます 。 













ekeN 間 昌 | 


2 


| ICHAPTER-12 ょ | |i4e 


ウィ ザー ド 形 式 で 画面 を 
切り 替え る 








ここ で は 、 ウ ィ ザ ー ド 形式 で 画面 を 切り 替え る 方 法 に つい て 解説 し ます 。 





Miac の 起動 方 法 


に ke* 





ステ タ ジ 


Mac を 起動 する に は 電源 ボタ ン を 細 し ます 。 











[next]J ボ タン で 次 の 画面 に 移動 し 、[previous] 
ボタ ン で 前 の 画面 に 戻る こと が で きま す 。 


Wiac の 起動 方 法 


に 23 ゆる 





ステ ッ プ 4 


ドッ クウ 上 の アイ コン を クリ ッ ウ する と アプ リケーション が 


起動 し ます 。 














| | 還 index.htm 





Wiac の 起動 方 法 
ステ ッ プ 2 





し ば らく する と 図 の よう な 画面 が 系 示さ れ ま す 。 アイ コ 
ン を ウリ ッ ク ウ し ます 。 





















= > 












| Mac の 起動 方 法 
ステ ッ プ 3 








パス ワー ド を 入力 し ます 。 し ば らく する と MacO5S X 


が 起動 し ます 。 
Lo | 











過 紀 IO 邊 Cl 4 ヨ IdVH つ 自 











<!DOCTYPE htm1 PUBLTC "-//W3C//DTD HTMT, 4 .01 Transitiona1 / /EN"> 


<htm] > 
<head> 


<meta hh 上 上 D-equ1Y= "Conten ヒ -tyDpe" 
Conten ヒ =" モ ex 上 /htm1 : CharSe モ =utF-8"> ーー 
< ヒュ 上 1]e>JavaSo エ ip 上 Samp1e</ ヒ ュ ヒ 1e> 


ノ 


<1ink re]="sty1eshee" hrefF="Wizard.css" @ い に 
を = 


type= "tex 七 /css" media="a11"> 








騙 油 IO 委 | - コ IdVYH つ 血 





<1ink re1="styleshee" ype="Eex モ /ocss" hreF="mainm.CSS" 
media="a11 "> 
<8C エ ip ype=" ヒ ex / aaSC エ 1D 上 "5 エ C="Qdo]O .]S ">< く / SC エ 1p セ > 一 臣 
<SC エ 1p ヒ 上 ype=" ヒ xx 上 / る で aSC エ 1D 七 " S エ Co= "ma1n . 8 "></ SC エエ ユヒ > 
</head> 
< く DoQdy テ > 
<h1 >Mac の 起動 方 法 </h1> 
<div 1d="wizardMac" do]joType="W1zardConEainer" > 一葉 四 
<diY do]joType= "WizardPane "> 一 放 
<h1> ス テッ プ 1</h1> 
<p>Mac を 起動 する に は 電源 ボタ ン を 押し ます 。 < /p や > 上 E」 
< く /d1 マ > 
<div do]joType= "W1zardPane "> 
<h1> ス テッ プ 2</h1> 
<p> し ば らく する と 図 の よう な 画面 が 表示 され ます 。 アイ コン を クリ ッ ク し ます 。 < / や > 
< く /d1 マ > 
<diy dojoType="W1zardPane "> 
<h1> ス テッ プ 3</h1> 
<p> パ スワ ー ド を 入力 し ます 。 し ば らく する と MacOS X が 起動 し ます 。 </p> 
< く /d ュ 1 マ > 
<div doJjoType= "WizardPane" doneFunction= "done"> 
<h1> ス テッ プ 4</h1> 
<p> ド ッ ク 上 の アイ コン を クリ ッ ク す る と アプ リケーション が 起動 し ます 。 < /p> 
< く /d1 マ > 
< く /d ュ > 
</body テ > 
</html > 


・ ウ ィ ザ ー ド 表示 用 の スタ イル シー ト を 読み 込む 

…Dojo ラ イブ ラリ を 読み 込む 

…「dojoType」 属 性 を 使っ て ウィ ザー ド で 使用 する タグ の 範囲 を 指定 する 
…「dojoType」 属 性 に 「WizardPane」 を 指定 し 、 1 回 に 表示 され る 領域 (ペイン) を 指定 する 
… ウ ィ ザ ー ド 表示 領域 (パイ ン ) に 表示 する 文字 や 画像 な ど を 指定 する 


SeXe 委 eg ョ 当 目 用 用 馬 二 計 光 main.js 


dojo .require ( "do]jo .w1dget .Wizard" ) : 一 名 
do]o .hostenv . writeTno1udes ( ) : 

















Function done() { 
a1er ( "次 は 1Pod を 接続 し ます " ) : 一 放 


頭 Wizard ウ ィ ジェ ッ ト を 読み 込む 
話 ウィ ザー ド 完 了 時 の 処理 
橋 ウィ ザー ド が 完了 し た と き に 呼び 出さ れる 関数 


@7i 抽 9】 映 租 ウィ ザー ド 形 式 の 画面 を 構築 する に は Dojo の Wizard ウ ィ ジェ ッ ト を 利用 する 


ウィ ザー ド 形 式 の 画面 を 構築 する に は 、Dojo ラ イブ ラリ の Wizard ウ ィ ジ ェ ッ ト を 利用 する と 簡単 に で きま 
す 。 ウィ ザー ド 画 面 全体 を 囲む <div> タ グ を 用 意 し 、「dojoType」 属 性 に WizardContainer を 指定 し ます 。 
次 に 1 画面 ご と の 表示 領域 を <div> タ グ で 囲み 、「dojoType」 属 性 に 「WizardPane」 を 指定 し ます 。 これ は 、 
切り 替え る 画面 の 数 だ け 用 意 し ます 。 

最後 に 処理 が 完了 し た と き に 呼び 出す 関数 が ある 場合 に は 、 最 後 の 画面 を 表示 する <div> タ グ に 
「doneFunction」 属 性 を 指定 し ます 。 「doneFunction] 属 性 値 に 処理 完了 時 に 呼び 出す 関数 名 を 指定 し 
ます 。 

HTML の 設定 が 終わ っ た ら プ ログ ラム で 「dojo.require("dojo.widget.Wizard')」 と し て スク リプ ト フ ァ 
イル を 読み 込ま せま す 。 これ だ け で 自動 的 に ウィ ザー ド 処 理 が 行わ れ ま す 。 






























(Wiil Dojo TooIKit 


数 ある Ajax/JavaScript ラ イブ ラリ の 中 で 、 も っ と も 巨大 な の が Dojo で す 。 多く の ライ ブラ リ は 、 特 定 の 
処理 に 特 化 し て いま す 。 た と えば 、prototypej」S で あれ ば JavaScript の コア 機能 の 拡張 、Script.aculo.us 
で あれ ば エフ ェクト 、Yahoo UI Library で あれ ば ユー ザー イン ター フェ ー ス 、Adobe Spry で あれ ば XML 
デー タ 処 理 と いっ た 具合 で す 。 特 化 さ れ た 機能 を 持つ ライ ブラ リ を 組み 合わ せ て 目的 の 処理 を 行い ます 
が 、 そ の 際 に 問題 に な る の が ライ ブラ リ の 干渉 で す 。 つま り ラ イブ ラリ の 組み 合わ せ に よっ て は 誤動作 を 引 
き 起 こし て し まう こと が あり ます 。 

この よう な 障害 を 防ぐ に は 、prototype.jS に 依存 する ライ ブラ リ だ け で 構成 する と いっ た 工夫 が 必要 に 
な り ま す 。 この よう な 組み 合わ せ に よる 障害 は 、Dojo の よう に すべ て を サポ ー ト する ライ ブラ リ が あれ ば 解 
消さ れ ま す 。 

し か し 、 す べ て の 機能 を 持つ よう に する た め 、 ど うし て も ライ ブラ リ 自 体 が 巨大 化し て し まい ます 。 ライ ブ 
ラリ が 巨大 化 / 肥 大 化す る と 読み 込み まで に 時 間 が か か っ た り 、 環 境 に よっ て は メモ リ 不 足 を 引き 起こ すこ 
と も あり ます 。 また 、 実 行 速度 も 低下 し て し まう こと も あり ます 。 

Dojo に は サン プル で 掲載 し た ウィ ザー ド 機 能 だ け で な く 、 実 に さま ざま な 機能 を 提供 し て いま す 。 詳し く 
は 次 の URL を 参照 し て くだ さい 。 


http://dojotoolkit.Org/ 
The Dojo Toolkit 





ee:/dootooldtor/ 5 - <|5|x lesesra 
次 < wmepojo Toolt | The javascrpt roolct | 全国 ・ 避 は ペー ジ (P) "等 ツマ の 


About Release notes for 0.4.2 
Demos 『 0.4.2 Ajax Edition Getting started wth dojo 
Developer 


Documentation 


The Dojo Book 
API 


ShrinkSafe Dojo 0.4.2 


Downloads Tue. os/2o/2oo7 - og:46 一 alex 














箇 敵 IO 上 | - ヨ 1dYH つ 自 


剛 強 IO 上 1 - コ IdYHO 自 








デバ ッ ガ を 使っ て 不具 合 を 解決 する 


Ajax の 登場 以前 は JavaScript の デバ ッ ガ は 、 あ まり 良い ツー ル が あり ませ ん で し た 。 この た め 、 デ 
バッ グ コ ン ソ ー ル や ステ ー タ スバ ー、「alert()」 を 使っ て デバ ッ グ する と いう 状況 で し た 。 し か し 、 現 在 
で は 、「Firebug」 な ど 高 性 能 な デバ ッ ガ が ある の で 、 こ れ ら を 使用 する の が よい で し よう 。 

特に Firebug は 非同期 通信 の 状況 や 、 ご の よう な 内 容 で 読み 込ま れ た か 、DOM の 状態 や スタ イル 
シー ト が どの よう に 上 書き 設定 され た か な ど 非 常に 詳細 な 情報 を 表示 し て くれ ます 。 また 、 ス タイ ル 
シー ト の プロ パテ ィ を 追加 し た り 、 値 を リア ル タ イ ム に 変更 する こと が で きま す 。 

Firebug は 、 次 の ペー ジ で ダウ ン ロ ー ド する こと が で きま す 。 

* FireDug 
https://addons.mozilla.org/firefox/ 1843/ 












ファ イル (E) 押 (5 表 志野 (G) ブッ クマ ー ク (B) ツー ル (① ヘル プ (B その E の 
欠 ・ 史 ・@ 3 代 |@ Ps:/76ddons mozla.oro/js/frefox7sddor/1943 SS|・| 訂 | 還 rebeo _ 軸 
休 Frefox を 使っ て みよ う 回 半 ニ ュー ス 。。 ーー ーー 2 友 











































ホー ム 。 アドオン 。 欠 午 馬 。 firebug [ 。 。 検索 | | ユー ザ 合 | ログ イン 
この 講 。 Firebug 104 人 ャ <div class-"b1ogPost> 
お すす め の ア ド オン 作者 : を <div closs=" imogeHeode 
ブラ ウズ 





repog ineegraCes wt ヵ Frefox to pot a weat カ of deveoprenr 6ooj な a 
邊 稼 神 和 yoor fngertjps we yoo prowse. You Can eiC。 de の og, an mon7tor CSS, 


ャ <div style-"floot: rigl | 
| 
ニヤ 477。 an フ avaScrjpt 7ve 7n gny Web Page… rw 【 


スベ ル チ ェ ッ ク 午 各 Firebug integrates with Firefox to put a wealth of development tools at 
Your fingertips while you browse. You can edit。 debug, and monitor CSS, 
HTML。 and JavaScrpt live in any web page. 


フラ グイ ン 

Visit the Firebug website for documentation, screen shots, and discussion forums: 
団 発 者 短 (NDC) 

http://www.getfirebug.com 

対応 パー ジョ ン : 
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意外 と 知ら れ て いな い 
SNS の 謎 を 解く 


SNS と は そもそも 何 な の か と いう 基 
礎 知 識 か ら 、 な ぜ 流 行 し た の か 、 
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